我的 css 代码有问题。
如您所见,我对 li 元素进行了过滤,但它覆盖了其他元素。我需要使其他两个元素没有过滤器:
有没有可能这样做。
.main {
width:300px;
height:300px;
background-color:blue;
list-style:none;
}
.button {
position: absolute;
top: 35% ;
height: 30px;
width: 120px;
display: none;
z-index: 99;
background-color:black;
color:white;
}
.icon {
width: 30px;
position: absolute;
z-index: 99;
display: none;
width:100px;
}
.main:hover > .button {
display: block;
filter: none;
}
.main:hover > .icon {
display: block;
filter: none;
}
.main:hover {
filter: brightness(50%);
transition: 0.5s;
}
Run Code Online (Sandbox Code Playgroud)
<li class="main">
<img src="https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png" class="icon" />
<a class="button" href="#">Button</a>
</li>
Run Code Online (Sandbox Code Playgroud)
执行此操作的唯一方法是恢复子级上的过滤器。
例如,如果父母有:
filter: invert(100%);
Run Code Online (Sandbox Code Playgroud)
然后将此过滤器应用于子级将反转效果:
filter: invert(100%);
Run Code Online (Sandbox Code Playgroud)
请注意,如果您有多个过滤器,则过滤器的顺序很重要!
这样,过滤器将应用于除应用反向过滤器的子级之外的所有子级。
filter: invert(100%);
Run Code Online (Sandbox Code Playgroud)
filter: invert(100%);
Run Code Online (Sandbox Code Playgroud)
对于更复杂的过滤器组合,恢复更困难。首先,请查看此问题以获取更多信息:
你不能那样做。孩子会受到父母风格的影响。
这就是层叠样式表的工作原理。
我建议您使用伪元素使其按照您想要的方式工作,这样只有伪元素会受到影响。
请参阅片段中的评论:
.main {
position: relative; /* Added */
width: 300px;
height: 300px;
list-style: none;
}
.main::before { /* Added */
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
transition: 0.5s;
}
.button {
position: absolute;
top: 35%;
height: 30px;
width: 120px;
display: none;
z-index: 99;
background-color: black;
color: white;
}
.icon {
width: 30px;
position: absolute;
z-index: 99;
display: none;
width: 100px;
}
.main:hover>.button {
display: block;
/* filter: none; Commented */
}
.main:hover>.icon {
display: block;
/* filter: none; Commented */
}
.main:hover::before { /* Modified */
filter: brightness(50%);
}
Run Code Online (Sandbox Code Playgroud)
<li class="main">
<img src="https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png" class="icon" />
<a class="button" href="#">Button</a>
</li>
Run Code Online (Sandbox Code Playgroud)
希望能帮助到你。