web-dev-qa-db-fra.com

Sur l'enfant survol changer le css de parent

Je veux changer le css de parent sur le survol de l'élément enfant.

<ul id="main-menu">
        <li>
            <a href="#">
                <i class="fa fa-building-o" aria-hidden="true"></i>
                Private Limited
                <i class="fa fa-caret-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#0">Company</a></li>
                <li><a href="#0">Contact</a></li>
                <li><a href="#0">Industry</a></li>
            </ul>
        </li></ ul>

Ce que je veux, c'est que si je passe la souris sur li de sous-menu, li de menu principal soit surligné.

csshtml5css3
6
WebStarter

Comme déjà mentionné, il n’existe pas de sélecteur de parents, mais si vous reconnaissez que vous survolez déjà le parent, vous pouvez obtenir ce que vous voulez.

Un exemple approximatif: 

#main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}
<ul id="main-menu">
  <li>
    <a href="#">
      <i class="fa fa-building-o" aria-hidden="true"></i>
      Private Limited
      <i class="fa fa-caret-down"></i>
    </a>
    <ul class="submenu">
      <li><a href="#0">Company</a>
      </li>
      <li><a href="#0">Contact</a>
      </li>
      <li><a href="#0">Industry</a>
      </li>
    </ul>
  </li>
  </ ul>

19
Jon P

Comme d'autres postes disent, il n'y a pas de sélecteur de parent.

Voici comment cela devrait fonctionner:

li:has(> i:hover) { /* styles to apply to the li tag */ }

Cela permet de vérifier si li a un i avec :hover en elle. Si c'est le cas, le css est appliqué. Malheureusement, ceci n'est pas encore supporté.

5
djl

Il n’existe actuellement aucun moyen de sélectionner le parent d’un élément en CSS.

3
Demeter Dimitri

Ici vous pouvez aller ..

For Apply CSS..

$("#main-menu li").mouseover(function()
{ 
      $("#main-menu a:eq(0)").css({'color':'blue','font-weight':'bold'});
});

For Remove CSS..

$("#main-menu li").mouseout(function()
{ 
     $("#main-menu a:eq(0)").removeAttr("style");
});

[link] ( https://jsfiddle.net/aj23whnb/ )

0
shivani