При наведении на ребенка измените css родителя

Я хочу изменить css родителя при наведении дочернего элемента.

<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>

что я хочу, это если я наведу курсор на li из подменю, li of главное меню получить подчеркнул.

6
css css3 html5

4 ответов

Как уже упоминалось, нет родительского селектора, но если вы признаете, что вы уже зависаете над родителем, вы можете достичь того, что хотите.

грубый пример: 

#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>
17

как говорят другие сообщения, нет родительского селектора.

вот как это должно работать:

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

что это делает, это проверить, если li есть i С :hover государство. Если это так, он применяет css. К сожалению, это пока не поддерживается..

4

в настоящее время нет способа выбрать родителя элемента в CSS.

3

здесь вы можете идти..

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");
});

[ссылка] (https://jsfiddle.net/aj23whnb/)

0