[英]Hover effect and underline disappear with changing the background color
I have a main panel in an angular project.我在一个角度项目中有一个主面板。 I wanted to change the background color of it, but then my underline and hover effects disappear.
我想更改它的背景颜色,但是我的下划线和悬停效果消失了。
Before changing the background color:在更改背景颜色之前:
After changing the background color to white:将背景颜色更改为白色后:
I have an admin layout which looks like this:我有一个看起来像这样的管理布局:
<div class="main-panel">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</div>
With the css:使用CSS:
.main-panel {
background-color: rgb(255, 255, 255);
}
Also the following home.component, where the text is:还有以下 home.component,其中的文本是:
<div><span class="highlight">Cloud Native</span>: Cloud Training, Cloud Development, Cloud Architecture, Cloud Assesment....</div>
And this is my css for the underlined and hovered element:这是我的下划线和悬停元素的css:
.highlight {
position: relative;
}
.highlight::after {
content: " ";
left: 0;
right: 0;
position: absolute;
bottom: 1px;
height: 25%;
background-color: #9bffb0a6;
z-index: -1;
border-radius: 2px;
}
.highlight:hover::after {
background-color: #80ff9b;
}
The problem is caused by the negative z-index
.问题是由负
z-index
引起的。 Remove the property or set it to zero.删除该属性或将其设置为零。
By setting this negative z-index
, you move the ::after
pseudo element behind .main-panel
and since you explicitly set background color to the .main-panel
, the pseudo element is always invisible.通过设置此负
z-index
,您将::after
伪元素移动到.main-panel
后面,并且由于您明确设置了.main-panel
背景颜色,因此伪元素始终不可见。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.