Question

我想在Child元素的悬停时更改父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

正如已经提到的那样，没有父选择器，但是如果你认识到你已经将鼠标悬停在父母身上，你可以实现你想要的目标。

一个粗略的例子：

＆＃13;

#main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}

＆＃13;

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

＆＃13;

Answer 2

正如其他帖子所说，没有父选择器。

这是它应该如何运作的：

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

这样做会检查li中是否有i个:hover状态。如果是这种情况则应用css。不幸的是，这还不支持..

Answer 3

目前无法在CSS中选择元素的父级。

Answer 4

你可以去..

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

Answer 5

如果要触发带有子元素的子元素，请使用此元素。

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

在儿童悬停时更改父母的CSS

5 个答案: