0
238
ViewsHow can I change background color of ::before on hover?
I have a ul-li list and when i hover last li ::before element looks white and not so good. So i need change it when i hover last li element. How can i make it ? My Codes :
<div className="dropup-content">
<ul>
<li className="content-item">
<a
className="content-link"
href="#"
target="_blank"
>
<i
className={` content-icon `}
></i>
<div className="content-info">
<span
className={`content-info-name }`}
>
Name
</span>
<span className="content-info-subtitle"><Subtitle</span>
</div>
</a>
</li>
<li className="content-item">
.
.
.
</ul>
</div>
CSS:
.dropup {
position: relative;
display: inline-block;
transition: all 0.2s ease;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
bottom: 79px;
right: 3px;
width: 250px;
z-index: 1;
border-radius: 5px;
}
.dropup-content::before {
position: absolute;
bottom: -8px;
right: 25px;
left: auto;
display: inline-block !important;
border-right: 8px solid transparent;
border-top: 8px solid #f1f1f1;
border-left: 8px solid transparent;
content: "";
}
What I've tried:
.content-item:hover:last-child .dropup-content::before {
background:red;
}
I need change that color to gray as hover. So what can I do?
·
Juan Pablo Isaza
1 answers
Answer question0
.drop div {
position: relative;
padding: 10px;
}
.drop div:nth-of-type(odd) {
background: #eee;
}
.drop div:nth-last-of-type(1)::after {
content: 'after';
position: absolute;
color: teal;
bottom: 0;
left: 100px;
}
.drop div:nth-last-of-type(1):hover::after {
color: red;
background: #fff;
}<div class="drop">
<div>item A</div>
<div>item B</div>
<div>item C</div>
</div>
·
Juan Pablo Isaza
Report
Answer question