Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <select class="calc" name="uzor">
- <option title="Подсказка 1" value="1">узор 1</option>
- <option title="Подсказка 2" selected="selected" value="2">узор 2</option>
- <option value="3">узор 3</option>
- <option value="4">узор 4</option>
- <option value="5">узор 5</option>
- <option value="6">узор 6</option>
- </select>
- <select class="calc" name="uzor">
- <option data-img="img1.jpg" value="1">узор 1</option>
- <option data-img="img2.jpg" selected="selected" value="2">узор 2</option>
- <option data-img="img3.jpg" value="3">узор 3</option>
- <option data-img="img4.jpg" value="4">узор 4</option>
- <option data-img="img5.jpg" value="5">узор 5</option>
- </select>
- <div id="tooltip">
- <img src="" alt="">
- </div>
- var tooltip = $('#tooltip'),
- calc = $('.calc'),
- posLeft = calc.offset().left + calc.width();
- $('option[data-img]', calc).on({
- mouseenter: function (e) {
- $('img', tooltip).attr('src', $(this).data('img'));
- tooltip.finish()
- .css({
- top: e.pageY,
- left: posLeft
- })
- .fadeIn();
- },
- mouseleave: function () {
- tooltip.fadeOut();
- }
- });
Add Comment
Please, Sign In to add comment