Whiting容器我需要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>
&#13;
答案 0 :(得分:0)
为什么要使用JavaScript?
$("#da-thumbs").on("mousemove", "li", function (evt) {
var li = $(this),
offX = li.offset().left,
width = li.width(),
x = evt.clientX;
li.toggleClass("right", x-offX>width/2);
});
.da-thumbs li:hover a div, /* slides div in on hover */
.da-thumbs li.right:hover a div{
transition: 1s; /* sets amount of time for the animation */
margin-left: 0; /* positioned with margin instead of left */
margin-right: 0;
}
.da-thumbs li.right a div {
margin-left: 600px;
}
.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;
overflow: hidden; /*Hide the overflow */
}
x.da-thumbs li a {
display: block;
position: relative;
overflow: hidden;
text-decoration: none;
}
.da-thumbs li a div {
transition: 1s; /*slides div out */
position: relative;
background: #777;
background: rgba(75, 75, 75, 0.7);
width:200px;
height:200px;
z-index: 3;
margin-left:-300px; /* positioned with margin instead of left */
}
.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/1.11.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>
答案 1 :(得分:0)
$("#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。
但是有了这个,你将完全没有你所链接的演示所具有的“缓动”/动画。如果这是你想要的东西,你将不得不使用不同的方法。如果是这样,也许这也是我可以帮助你的东西。