在相对于li的位置悬停li元素上显示隐藏的响应div

Question

我有图像列表，并且在悬停每个li ，我需要一个div来显示在悬停的元素附近。 我试图使用jquery获取每个li的位置。 但这没有用。 我该如何确定？

示例代码：

<ul>
    <li><img src="image1.png"></li>
    <li><img src="image2.png"></li>
    <li><img src="image2.png"></li>
</ul>
<div class="popup-box hide">
    <p> some text...</p>
</div>

<style>
.hide{display:none;}
</style>

Answer 1

我们可以使用mouseenter ， mouseout和mousemove事件来做到这一点。

---

• 在mouseenter ，我们将显示div。
• 在mouseout ，我们将隐藏div。
• 在mousemove ，我们将即时更改div的位置。

---

 $("#list").on("mouseenter", "li", function() { $("#popupbox").show(); $(this).off("mousemove").on('mousemove', function(e) { $('#popupbox').css({ 'top': e.pageY, 'left': e.pageX, 'z-index': '1' }); }); }).on("mouseout", "li", function() { $("#popupbox").hide(); }) 

 li { background: #f00; color: #fff; margin-bottom: 10px; } .popup-box { position: absolute; width: 50px; height: 50px; background: #00f; margin-left: 5px; margin-top: 5px; } .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"> <li> <img src="image1.png"> </li> <li> <img src="image2.png"> </li> <li> <img src="image2.png"> </li> </ul> <div id="popupbox" class="popup-box hide"> <p>some text...</p> </div> 

Answer 2

基本上，您可以通过这种方式进行操作。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div class="popup-box hide" style="position:absolute;">
    <p> some text...</p>
</div>

<style>
    .hide{display:none;}
</style>
<script type="text/javascript">
    $("ul li").on("mousemove", function(){
        var position = $(this).position(),
            popup = $(".popup-box");

        popup.removeClass("hide");
        popup.css({"top": position.top + "px", "left": position.left + "px"});
    })
    $("ul li").on("mouseout", function(){$(".popup-box").addClass("hide");})
</script>

我添加了style =“ position：absolute;” 在您的弹出框上，它会跟随我们在鼠标悬停时设置的css位置。

希望这个帮助