html - 试图让孩子悬停与父母不同
问题描述
我正在尝试创建一个 ul,当悬停时,不透明度会移动到 0.4,但是当悬停在 li 元素上时,该单个元素的不透明度会返回到 1。
这可能吗?注意我正在使用 Fomantic UI(语义 UI 分支)
<div class="four wide column">
<ul>
<li><a class="item" href="">link 1</a></li>
<li><a class="item" href="">link 2</a></li>
<li><a class="item" href="">link 3</a></li>
</ul>
</div>
ul{
list-style-type: none;
padding-left: 0px;
transition: 0.5s;
&:hover{
opacity: 0.4;
}
}
li{
padding-top: 5px;
padding-bottom: 5px;
transition: 0.5s;
&:hover{
opacity: 1;
}
}
解决方案
我已经设法解决了这个问题,孩子需要包含在父指令中,如下所示
ul{
list-style-type: none;
padding-left: 0px;
display: block;
transition: 0.5s;
}
ul:hover **li a**{
opacity: 0.4;
}
li{
padding-top: 5px;
padding-bottom: 5px;
transition: 0.5s;
a{
font-family: montserrat;
background-color: transparent;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #fff;
transition: 0.5s;
}
a:hover {
opacity: 1!important;
}
}
推荐阅读
- react-native - 在android应用程序中更新联系人列表的问题
- migration - 将多个“.tfstate”和“.tfvars”文件迁移到“s3”后端
- javascript - EJS:我怎样才能让我的内容占据整个屏幕(例如宽度:100%)?
- regex - 使用 Look Ahead 和 Look Behind Regex 模式时如何替换匹配的第 n 次出现
- r - 如果为 1,则将列转换为逗号分隔列表
- numpy - 如何使用 PyPI 中的二进制文件(不是来自源代码)进行管道安装?
- python - 使用字典中的键从数据框中检索值
- polymer - Cobalt 是否支持 Web 组件(例如 Polymer/lit-element 工作)?
- git - 使用 Gitkraken 将 IntelliJ 连接到 Git
- android - Andrioid 向上滑动即可关闭,无需在回收站视图外切割视图