在子懸停時更改 Parent 的 css

Question

我想在 Child 元素懸停時更改 parent 的 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 會突出顯示。

Answer 1

如前所述，沒有父選擇器，但如果您認識到您已經將鼠標懸停在父選擇器上，則可以實現您想要的。

一個粗略的例子：

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

Answer 2

正如其他帖子所說，沒有父選擇器。

這是它應該如何工作：

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

這樣做是檢查li是否有一個帶有:hover狀態的i 。 如果是這種情況，它會應用 css。 不幸的是，這還不支持..

Answer 3

目前沒有辦法在 CSS 中選擇元素的父級。

Answer 4

如果要使用子元素觸發子元素，請使用此方法。

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

Answer 5

在這里你可以去..

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