努力处理parentbackground-color/child:在background-color冲突之前
Struggling to deal with parent background-color/ child: before background-color conflict
我设法创建了一个伪 :before 元素以添加到菜单项中,但当我将背景颜色/图像添加到 parent div (bottom-nav) 伪元素似乎坏了,谁能解释一下?
注意,我正在使用语义 UI(语义 UI 分支)
.bottom-nav {
background-color: #000;
.menu {
margin-bottom: 30px;
.toggle-sidebar {
margin-top: 25px;
color: #2f2f2f;
}
.ui.dropdown {
margin-top: 25px;
}
.item {
font-family: Open Sans;
font-size: 14px;
font-weight: 700;
color: #fff;
padding: 10px;
}
.item:before {
content: '';
opacity: 1;
position: absolute;
border-radius: 2px;
height: 20px;
transform: translate(-50%, 0);
background-color: #cd2122 !important;
overflow: hidden;
width: 0%;
left: 50%;
z-index: -1;
transition: 0.3s ease;
}
.item:hover:before {
opacity: 1;
width: 100%;
}
}
}
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/dist/semantic.min.js"></script>
<div class="bottom-nav">
<div class="ui container">
<div class="ui grid">
<div class="sixteen wide column mobile hidden tablet hidden menu">
<div class="ui dropdown">
<a class="item" href="#">Link 1</a>
</div>
<div class="ui dropdown">
<a class="item " href="#">Link 2</a>
</div>
<div class="ui dropdown">
<a class="item" href="#">Link 3</a>
</div>
<div class="ui dropdown">
<a class="item" href="#">Link 4</a>
</div>
</div>
</div>
</div>
</div>
我更改了 2 项应该使伪元素再次可见的内容。
将 z-index 更改为非负数,因此它将在背景色之前可见。并且还给了它一个不为 0 的宽度。
[编辑:在 OP 进一步解释后更新了代码]
.item {
font-family: Open Sans;
font-size: 14px;
font-weight: 700;
color: #fff;
padding: 10px;
position: relative;
}
.ui.dropdown:before {
content: '';
opacity: 1;
position: absolute;
border-radius: 2px;
height: 20px;
transform: translate(-50%, 0);
background-color: #cd2122 !important;
overflow: hidden;
width: 50px;
left: 50%;
z-index: 1 ;
transition: 0.3s ease;
}
我设法创建了一个伪 :before 元素以添加到菜单项中,但当我将背景颜色/图像添加到 parent div (bottom-nav) 伪元素似乎坏了,谁能解释一下?
注意,我正在使用语义 UI(语义 UI 分支)
.bottom-nav {
background-color: #000;
.menu {
margin-bottom: 30px;
.toggle-sidebar {
margin-top: 25px;
color: #2f2f2f;
}
.ui.dropdown {
margin-top: 25px;
}
.item {
font-family: Open Sans;
font-size: 14px;
font-weight: 700;
color: #fff;
padding: 10px;
}
.item:before {
content: '';
opacity: 1;
position: absolute;
border-radius: 2px;
height: 20px;
transform: translate(-50%, 0);
background-color: #cd2122 !important;
overflow: hidden;
width: 0%;
left: 50%;
z-index: -1;
transition: 0.3s ease;
}
.item:hover:before {
opacity: 1;
width: 100%;
}
}
}
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/dist/semantic.min.js"></script>
<div class="bottom-nav">
<div class="ui container">
<div class="ui grid">
<div class="sixteen wide column mobile hidden tablet hidden menu">
<div class="ui dropdown">
<a class="item" href="#">Link 1</a>
</div>
<div class="ui dropdown">
<a class="item " href="#">Link 2</a>
</div>
<div class="ui dropdown">
<a class="item" href="#">Link 3</a>
</div>
<div class="ui dropdown">
<a class="item" href="#">Link 4</a>
</div>
</div>
</div>
</div>
</div>
我更改了 2 项应该使伪元素再次可见的内容。 将 z-index 更改为非负数,因此它将在背景色之前可见。并且还给了它一个不为 0 的宽度。
[编辑:在 OP 进一步解释后更新了代码]
.item {
font-family: Open Sans;
font-size: 14px;
font-weight: 700;
color: #fff;
padding: 10px;
position: relative;
}
.ui.dropdown:before {
content: '';
opacity: 1;
position: absolute;
border-radius: 2px;
height: 20px;
transform: translate(-50%, 0);
background-color: #cd2122 !important;
overflow: hidden;
width: 50px;
left: 50%;
z-index: 1 ;
transition: 0.3s ease;
}