在我的应用程序中并排列出了一堆图像。当悬停图像时,会显示有关图像的信息(描述、标题等)。这在大多数情况下都有效,但很多时候却没有。
例如,当我悬停图像并重新加载页面时,切换会在该图像的另一个方向上起作用,即。默认情况下,隐藏的 div 会显示,当我将其悬停时它会被隐藏(在所有其他图像上它都可以正常工作)。
这真的很烦人,我不知道如何解决它。下面是这个的代码(希望它足够了)。
如果有人可以在这里帮助我,我将不胜感激。
JS:
$('.post').hover(function () {
var image = $(this);
image.find('.postDesc').toggle();
});
HTML:
<div class="post">
<img class="images" src="../images/image.png">
<div class="postDesc">
// other code...
CSS:
.post {
background: white;
width: 200px;
height: 200px;
margin: 0px auto;
float: left;
margin-right: 30px;
margin-bottom: 30px;
position: relative;
padding: 5px;
-moz-box-shadow: 0 0 4px 1px #777;
-webkit-box-shadow: 0 0 4px 1px#777;
box-shadow: 0 0 4px 1px #777;
}
.postDesc {
background-color:rgba(136, 136, 136, 0.35);
color: white;
width: 180px;
height:180px;
display:none;
position:absolute;
margin: 5px;
left: 0;
bottom: 0;
padding: 10px;
}