仅将webkit模糊过滤器应用于父级? (禁用孩子的过滤器!)

时间:2014-08-30 05:38:17

标签: filter webkit tumblr

我不是很熟悉编码,因为我刚刚开始不久,而且我目前正在研究Tumblr主题; http://heavenlyblue-theme.tumblr.com/并且我想这样做,所以在帖子上方盘旋会显示固定链接并仅模糊条目(我希望固定链接成为焦点)。

我不确定如何做这样的事情,因为将过滤器应用于悬停条目会使其适用于固定链接。

我正在使用Chrome atm。

#content .entry {


background-color: {color:COLOR06};

width: 500px;

margin: 0px 20px 20px;
display:inline-block;
padding: 50px;

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;  
position: relative;


}

.entry:悬停{

-webkit-filter: blur(1px);

}

.perma {

position: absolute;
width: 460px;
background-color: #fff;

height: auto;
padding: 20px;
top: 50%;
transform: translate(0, -50%);

opacity:0;

}

.entry:hover .perma {

opacity:1;

}

HTML看起来像这样。

 <div class="entry">
    <div class="perma">

    <center>&#9654; <a href="{Permalink}">
    {NoteCountWithLabel}</a>

    &#9654; <a href="{Permalink}">{TimeAgo}</a>

    &#9654; <a href="{ReblogParentURL}"title="{ReblogParentName}">via</a> &#10010; <a href="{ReblogRootURL}" title="{ReblogRootName}"> source</a>


    <a href="{ReblogURL}"><font size="3">&#8635;</font></a>


    </center>


    <div class="tags">{block:Tags}
    <a href="{TagURL}">&#10010; {Tag}</a>
    {/block:Tags}
    </div>


</div>

我已经四处寻找,但我看到了一些类似的问题,但我并不是真正理解这些解决方案,而是如何将它们应用到我的代码中。任何帮助表示赞赏!谢谢!

0 个答案:

没有答案