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

我们可以使用mouseout，mousemove和mouseenter事件执行此操作。

在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(); })，我们将动态改变div的位置。

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>

base_url

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位置。

希望这个帮助

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

2 个答案: