javascript - jQuery 用 DIV 水平跟随光标

Question

白色容器我需要 div 水平跟随光标。 每个 div 都有不同的内容，并且内容会根据位置而变化。

类似这样的 codepen

但是上面的链接既有垂直的也有水平的，这不是我需要的。

我做了一个DEMO

 $("#da-thumbs > li").hover(function () {


     $("div").show();
 }, function () {
     $("div").hide();
 });

 $('#da-thumbs > li').mousemove(function (e) {
     $("div").css({
         left: e.pageX - 120
     });
 });

.da-thumbs {
    list-style: none;
    padding:20px;
    display:inline-block;
}
.da-thumbs li {
    width:200px;
    height:200px;
    background: #000;
    float: left;
    margin: 5px;
    position: relative;
     z-index: 0;
}
.da-thumbs li a {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.da-thumbs li a div {
    display:none;
    position: relative;
    background: #777;
    background: rgba(75, 75, 75, 0.7);
    width:200px;
    height:200px;
    z-index: 3;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li> <a href="">
      <div><span>Menu by Simon Jensen</span></div>
    </a>

    </li>
    <li> <a href="">
      <div><span>Mr. Crabs by John Generalov</span></div>
    </a>

    </li>
</ul>

Answer 1

$("#da-thumbs li").hover(function () {
     $(this).find("div").show();
 }, function () {
     $(this).find("div").hide();
 });

 $('#da-thumbs li').mousemove(function (e) {
     var $this = $(this);
     $this.find("div").css({
         left: e.pageX - $this.position().left - 120
     });
 });

这是一个JSFiddle与工作代码。

但是这样您将完全缺乏您链接的演示所具有的“缓动”/动画。如果这是您想要的，您将不得不使用不同的方法。如果是这样，也许我也可以帮助你。