javascript – JS / CSS / HTML：悬停显示图像上的下拉选项

2023年6月29日 223次阅读

我需要在下拉选项悬停绑定到光标位置后显示图像.可能吗？我不能这样做,不能找到这样的东西.

我需要这样的东西

《javascript – JS / CSS / HTML：悬停显示图像上的下拉选项》

最佳答案 你可以尝试这样的事情.

var mouseX;
var mouseY;
$(document).mousemove(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

$(document).ready(function (event) {
    $('select').on('mouseenter', 'option', function (e) {
        //your logic here
        // this refers to the option so you can do this.value if you need..
            $('.imgdisplay').show();
            $('.imgdisplay').css({ 'top': mouseY, 'left':mouseX}).fadeIn('slow');
        //});
    });
});


<div>
    <select name="optionList" id="optionList" size="5" style="float:left">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <div class="imgdisplay" style="display:none; position:relative; float:left">
    <span>hello</span>
    </div>
</div>

这是工作小提琴

https://jsfiddle.net/yo468eLh/

点赞