Onhover First child after Pseudo class bg color change

Question

here I have to change after background-color on hover sub menu li first child only for the first child I want to change bg color. I had tried using selector ~ but still not working can anyone suggest me in the right direction.

.main {
 position: relative;
}
.main:after {
 content: 'After';
 position: absolute;
 top: -10px;
 width: 50px;
 height: 15px;
 background-color: red;
}
.demo:first-child:hover .main:after { background-color: blue;}

<ul class="main">
 <li>
  test
  <ul class="demo">
   <li><a>change bg after</a></li>
   <li><a>test2</a></li>
  </ul>
 </li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ul>

Shivasagar · Answer 1 · 2020-01-29T10:17:55.140

We can't select parent using CSS, so I used jquery for you please check below code:

$(document).ready(function(){
  $(document).on({
      mouseenter: function() {
          $(".main").addClass("hovered");
      },
      mouseleave: function() {
          $(".main").removeClass("hovered");
      }
  }, ".main li:first-child ul > li:first-child");
});

.main {
 position: relative;
}
.main:after {
 content: 'After';
 position: absolute;
 top: -10px;
 width: 50px;
 height: 15px;
 background-color: red;
}
.main.hovered:after { background-color: blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
 <li>
  test
  <ul class="demo">
   <li><a>change bg after</a></li>
   <li><a>test2</a></li>
  </ul>
 </li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ul>

This is possible by using CSS? – Husna Jan 29 '20 at 09:47 — Husna, Jan 29 '20 at 09:47
@Shivsagar here you are select all li test2 also changes bg – Husna Jan 29 '20 at 09:58 — Husna, Jan 29 '20 at 09:58

score 1 · Accepted Answer · answered Jan 29 '20 at 09:37

document.querySelector('ul.demo li:first-child').addEventListener('mouseover', () => document.querySelector('ul.main').classList.add('hover'));
document.querySelector('ul.demo li:first-child').addEventListener('mouseout', () => document.querySelector('ul.main').classList.remove('hover'));

.main {
  position: relative;
}

.main:after {
  content: 'After';
  position: absolute;
  top: -10px;
  width: 50px;
  height: 15px;
  background-color: red;
}

.main.hover:after {
  background-color: blue;
}

<ul class="main">
  <li>
    test
    <ul class="demo">
      <li><a>change bg after</a></li>
      <li><a>test2</a></li>
    </ul>
  </li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Onhover First child after Pseudo class bg color change

2 Answers2