Question

我正在制作一个tumblr主题，其中各个帖子在悬停时显示链接到永久链接页面并且其下方的帖子模糊。 .entry:hover #permalink和.entry:hover img {-webkitfilter:blur}单独工作，但不能一起工作。当我尝试将.entry:hover分配给两个不同的属性时，我可能正在做错CSS。或者是z-index和position的问题？

我可以使用jQuery制作类似“如果条目悬停显示永久链接 - ＆gt;模糊条目img”吗？

JSFiddle demo

的CSS：

body{
position:absolute;
}
.entry {
float:left;
width:100%;
}
.entry #permalink {
position:absolute;
width:100%;
opacity:0.0;

}
.entry:hover #permalink {
    opacity: 1;
    text-align:center;
    }
.entry img {
    -webkit-filter: blur(0px);
}
.entry:hover img {
    -webkit-filter: blur(5px);
}

HTML：

<div class="entry">
<div id="permalink"><a href="#">post number x</a></div>
<img src="#" alt="#" width="500px"/>
</div>

Answer 1

只需向z-index:100;添加.entry:hover #permalink或其他更大的内容，此处为working demo

为属性分配两个不同的类/ ID：hover

1 个答案: