javascript - 悬停时的文本动画故障
问题描述
我正在尝试创建一个动画,它将文本向上移动并在将鼠标悬停在卡片上时显示一些内容。将鼠标悬停在卡片上时,动画按预期工作,但是当光标放在文本顶部时,会出现这种奇怪的故障,并且文本会不断上下移动。
我已经把它放在:https ://codepen.io/anon/pen/qGwpaG
我的代码
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})
解决方案
您需要确保只有父元素触发事件。当使用 mouseover/mouseout 时,任何子元素也会触发这些你不想要的事件。
要解决此问题,您可以使用 mouseenter/mouseleave,或者更好的是,使用hover
简写:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
推荐阅读
- python-3.x - 如何使用 numpy 生成多类测试数据集?
- reactjs - Reactjs API 调用大数据
- php - 如何在php中将图像文件转换为PDF文件?
- c# - 消费者生产者 - 生产者线程从不执行分配的功能
- azure - 无法在 Azure 上打开 WebDeploy 端口 (8172)
- reactjs - 如何在反应中唯一标识标签
- html - tag within a table tag
- swift - 快速扩展半径时geofire返回重复键
- java - AWS Lambda(Java impl)未在日志中显示错误消息
- mysql - 根据销售数量获取前 10 名用户数据