webentwicklung-frage-antwort-db.com.de

Ändern Sie im Child-Hover die CSS von Parent

Ich möchte die CSS des übergeordneten Elements beim Hover des Child-Elements ändern.

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

Was ich will ist, wenn ich auf li von submenu , li von main-menu schwebe, hervorzuheben.

6
WebStarter

Wie bereits erwähnt, gibt es keine übergeordnete Auswahl, aber wenn Sie erkennen, dass Sie sich bereits über dem übergeordneten Element befinden, können Sie erreichen, was Sie möchten.

Ein grobes Beispiel: 

#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

Wie andere Beiträge sagen, gibt es keine Elternauswahl.

So sollte es funktionieren:

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

Was dies tut, ist zu prüfen, ob li einen i mit :hover-Status enthält. Wenn dies der Fall ist, wird die CSS angewendet. Leider wird dies noch nicht unterstützt ..

5
djl

Derzeit ist es nicht möglich, das übergeordnete Element eines Elements in CSS auszuwählen.

3
Demeter Dimitri

Wenn Sie ein untergeordnetes Element mit einem untergeordneten Element auslösen möchten, verwenden Sie diese Option.

.triggerDiv{
  display:none;
}
.child:hover ~.triggerDiv {
  display:block
}
<div class="main">
  <div class="parent">
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="triggerDiv">
      <p>I'm Here</p>
    </div>
  </div>
</div>
1
Anıl Şahin

Hier kannst du gehen ..

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