我需要仅在悬停 .post div时才可以看到后置页脚。我怎样才能做到这一点?后页脚div仅包含链接(标签)。
<div class="post">
<!-- other divs -->
<div class="post-footer"><!-- footer content here -->
</div>
</div>
具有如下结构:
<div class="post">
<!-- other divs -->
<div class="post-footer"><!-- footer content here --></div>
</div>
你需要使用类似的东西:
.post-footer { display:none; }
.post:hover .post-footer { display: block; }
或者,如果你想让它看起来平滑,你可以使用转换max-height
:
.post-footer { max-height: 0; transition: max-height 1s linear; }
.post:hover .post-footer { max-height: 300px; /* some value that will always be larger than the height of your footer */ }
注意:转换的浏览器兼容性表
两种方法的演示:http: //dabblet.com/gist/2819975
下载 jquery 并将其包含到您的 html 中;
$(document).ready(function(){
$('.post').hover(function(){
$(this).find('.post-footer').toggle(true);
},function(){
$(this).find('.post-footer').toggle(false);
});
});
在 javascript 文件中尝试上述操作