我想要的是相对简单的 - 当你将鼠标悬停在图像上时,我希望它的margin-left变为-400px;它做的。但是当你将鼠标移动到div下面的时候。图像,它会导致图像在悬停边缘和其静止边缘之间来回闪烁。
有没有办法阻止这种情况发生(不重做所有代码)?
有问题的班级名称是#fsmhover和#fssmol2:
.fbgsm {
float: left;
margin-top: 10px;
margin-left: -120px;
height: 130px;
width: 400px;
background-color: #fff;
display: inline-block;
overflow: hidden;
}
#fsmhover {
background-image: url('http://i.imgur.com/3mnetFt.png');
width: 400px;
height: 130px;
position: relative;
top: 0px;
z-index: 3;
transition: 0.4s ease-in-out;
}
#fsmhover:hover {
margin-left: -400px;
}
#fsmscroll2 {
background-color: #fff;
margin: -120px 0px 0px 100px;
width: 250px;
height: 100px;
padding: 5px 10px;
border-left: 1px solid #000;
overflow: auto;
font-size: 11px;
font-family: arial;
text-align: justify;
line-height: 120%;
}
#fsmscroll2:hover + #fsmhover {
margin-left: -400px;
}
#fsmscroll2::-webkit-scrollbar {
width: 2px;
}
#fsmscroll2::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.2);
}
#fsmscroll2::-webkit-scrollbar-thumb {
background-color: #000;
}

<div id="fsmhover"></div>
<div id="fsmscroll2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim metus, bibendum in arcu et, blandit fringilla sapien. Integer a sollicitudin justo. Vestibulum finibus suscipit bibendum. Nam in ultricies magna, egestas commodo enim.
<p />Nam vulputate enim at augue suscipit, non tempus massa tristique.
</div>
&#13;
答案 0 :(得分:1)
你应该在他们的共享容器上使用:hover
伪类(让我们用 fbgsm 类说div)而不是文本元素本身:
所以写下来:
.fbgsm:hover #fsmhover {
margin-left: -400px;
}
而不是:
#fsmhover:hover {
margin-left: -400px;
}
#fsmscroll2:hover + #fsmhover {
margin-left: -400px;
}
答案 1 :(得分:0)
由于该元素已滚动,它不再悬停,因此它会向后移动并变为悬停并移开...
最简单的解决方法是将padding-right: 400px; background-repeat: no-repeat;
设置为#fsmhover
。这样,背景图像不会重复到填充,右边的填充可以确保元素不会被移开。