[英]jquery show an element on mouseenter
正如标题所说,当鼠标悬停在它上面时,我希望元素淡入。
<div class="carousel-item">
<div class="carousel-item-top">
<img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
<div class="carousel-item-top-hover"></div>
</div>
<div class="inline-block carousel-item-bottom">
<h5 class="pull-left">Awesome Design</h5>
<span class="pull-right share">
74
<i class="fa fa-heart"></i>
<span class="v-sep"></span>
<i class="fa fa-share"></i>
</span>
</div>
</div>
该项目的CSS我希望变得可见
.carousel-item-top-hover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #219fd1;
opacity: 0.85;
display: none;
}
我希望能够处理它的一个javascript变种
$(".carousel-item-top").mouseenter(function () {
$(this)(".carousel-item-top-hover").fadeIn('slow')
});
注意:你所说的并不反映你尝试过的代码(你说你希望在鼠标结束时显示该元素,但代码会在其他东西悬停时显示。)我假设你意味着你的代码所说的。
适当的处理程序是$(el).mouseover() 。
$(".carousel-item-top").mouseover(function () {
$(".carousel-item-top-hover").fadeIn('slow')
});
你几乎拥有它,但你有一个多余的(this)
。
您不能将鼠标悬停在未显示的内容上。 鼠标不能悬停在不存在的东西上。 您可能希望将可见性设置为隐藏而不是显示无。 然后还有空间,你可以将鼠标悬停在它上面。
visibility: hidden;
如果这不起作用,请将不透明度设置为0,然后在鼠标输入时将不透明度设置为.85。
而不是使用fadeIn
,使用fadeTo
像这样:
$(".carousel-item-top-hover").fadeTo('slow', 1);
您也可以提供速度的整数(以毫秒为单位),而不是慢速。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.