0
242
Views¿Cómo puedo cambiar el color de fondo de ::before on hover?
Tengo una lista ul-li y cuando paso el último li ::before elemento se ve blanco y no tan bueno. Así que necesito cambiarlo cuando paso el último elemento li. ¿Cómo puedo hacerlo? Mis códigos:
<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: ""; }Lo que he probado:
.content-item:hover:last-child .dropup-content::before { background:red; } 
Necesito cambiar ese color a gris como hover. ¿Entonces Que puedo hacer?
·
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