CSS / On hover, can I change the same element's ::after?

Question

I have tag with class="dropdown-button" and want to style its ::after on first LI element hover.

I am trying this:

<ul class="dropdown-button">
   <li> home </li>
   <li> about us </li>
</ul>

style {

   .dropdown-button {
     margin-top:10px;
     border:1px solid #ccc;
    }  

  .dropdown-button::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 7px;
    position: absolute;
    top: -6px;
   }

   // To solve problem, I do this :
   .dropdown-button li:first-child:hover .dropdown-button::after{
     border-bottom: 6px solid #a1a2a3;
     content: "";
    }

    //But this doesn't work.

}

Any suggestions?

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Temani Afif, Jan 10 '18 at 07:57

score 1 · Accepted Answer · answered Jan 10 '18 at 10:18

This in js:

var el = $('.dropdown-button');
var firstChild = el.children().first();

firstChild.on('mouseover', onMouseOver);
firstChild.on('mouseout', onMouseOut);

function onMouseOver() {
    el.addClass('first-child-hovered');
}

function onMouseOut() {
    el.removeClass('first-child-hovered');
}

And then in css:

.first-child-hovered::after {
    // change style here
}

score 0 · Answer 2 · answered Jan 10 '18 at 08:57

0

Simple code :

.dropdown-button li:first-child:hover::after{
     border-bottom: 6px solid #a1a2a3;
     content: "";
}

answered Jan 10 '18 at 08:57

Gega Gagua

92
9

score 0 · Answer 3 · answered Jan 10 '18 at 10:28

Well, the deep answer is: affecting a parent's pseudo-class through a child's pseudo-class cannot be done by pure CSS. It's in the name: Cascading Style Sheets only supports styling in cascading direction, not upwards to its parent. So here's a better fix. Introduce a new span element in your

, give it the :after pseudo-element properties and on hover of the list-item's first-child, display your new element. Solution all in CSS. Please follow the snippet below:

    .dropdown-button {
         margin-top:10px;
         border:1px solid #ccc;
         position: relative;
        }  
    
      .dropdown-button:after {
        border-bottom: 6px solid #FFFFFF;
        border-left: 6px solid rgba(0, 0, 0, 0);
        border-right: 6px solid rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        left: 7px;
        position: absolute;
        top: -6px;
        transition: border-bottom 0.5s ease;
        z-index: 0;
       }
    
      .dropdown-button1:after {
        
        border-bottom: 6px solid red;
        border-left: 6px solid rgba(0, 0, 0, 0);
        border-right: 6px solid rgba(0, 0, 0, 0);
        content: "";
        display: none;
        left: 7px;
        position: absolute;
        top: -6px;
        z-index: 3;
       }
       li:first-child:hover ~ .dropdown-button1:after {
         border-bottom: 6px solid #a1a2a3;
         display: inline-block;
    }

    <ul class="dropdown-button">
       <li> home </li>
       <li> about us </li>
       <span class="dropdown-button1"></span>
    </ul>

hussain nayani · Answer 4 · 2018-01-10T06:11:12.573

-1

You can do this by using jQuery

$(".dropdown-button").first('li').hover(function(){
   $(this).parent().addClass('hovered');
})

//CSS
.hovered:after {
   border-bottom: 6px solid #a1a2a3;
   content: "";
}

edited Jan 10 '18 at 06:11

answered Jan 10 '18 at 06:02

hussain nayani

317
1
3
14

CSS / On hover, can I change the same element's ::after?

4 Answers4