【发布时间】：2018-09-16 22:39:20
【问题描述】：
我想要做的是，当用户将鼠标悬停在图像上时，带有信息图标的透明黑色叠加层会出现在图像上。
由于某种原因，我似乎找不到我的逻辑有什么问题。
我正在使用 JQuery 的 toogleClass() 来切换隐藏类。
$(document).ready(function(){
$('.toggle_hide').hover(function(){
$(this).toggleClass('hide');
});
});* {
box-sizing:border-box;
margin:0;
padding:0;
}
a{text-decoration:none;}
.hide{display:none; transition: 0.5s ease all;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%; height:auto; display:flex; flex-direction:column; padding:0px 0px; ">
<span style="width:100%; height:150px; display:flex; justify-content:center; align-items:center; font-family:Ostrich Sans Bold; font-size:65px; font-weight:900; color:rgba(0,0,0,0.9);">NUESTROS BOCATAS</span>
<div style="width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;">
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
</div>
</div>【问题讨论】：
-
不要使用内联 CSS/JS - 这是一种不好的做法，会导致代码难以维护
-
不仅如此，对于决定如何将时间花在 Stack Overflow 上的人们来说，它是压倒性的，而且难以解读。
-
图标在哪里发挥作用？我在你的代码中没有看到它？此外，代码 sn-p...它无法正常运行，对吗？我在代码语法或代码 sn-p 示例中没有看到图标？
-
这可能会帮助您检查此链接Here
-
这样的功能不需要 jQuery。