将CSS hover效果应用于非所悬停元素的子元素

Question

波浪线符号（~）仅适用于#header。但如果我想在

标签上尝试它，它不起作用，因为它位于#header内部。

#header {
  background-color: red;
}
/*
    header:hover ~ .element {
     background-color:blue;
    }
    */

li:hover ~ .element {
  background-color: blue;
}
.element {
  background-color: green;
}

<header id="header">
  <li><a href="#">Hover</a>
  </li>
</header>

<div class="element">
  <p>hello world</p>
</div>

- Abdul Rehman

---

没有 JavaScript 是做不到的，必须使用 JavaScript。 - mituw16

你不能。但是你真的需要这个选择器吗？有多个元素吗？ - idmean

如果你改用 #header:hover ~ .element {}，就可以实现相同的效果。我认为使用 li:hover 没有逻辑，因为 .element 无论如何都会被放置在它们之后。 - RafaelTSCS

Wumm先生，我只需要概念。因为我在jquery代码中遇到了选项卡导航菜单的困难，就像http://www.businessinsider.com/一样。 - Abdul Rehman

我不是jQuery代码的专家或者很有经验的人，但是我在鼠标离开方面遇到了问题。 - Abdul Rehman

Answer 1

像这样做：

#header {
      background-color: red;
    }
    /*
    header:hover ~ .element {
    background-color:blue;
    }
    */

    #header:hover ~ .element {
      background-color: blue;
    }
    .element {
      background-color: green;
    }

<header id="header">
      <li><a href="#">Hover</a>
      </li>
    </header>

    <div class="element">
      <p>hello world</p>
    </div>

你所有的li元素都在#header内。因此，具有class="element"的div将始终放置在header之后。无需选择li:hover。

- RafaelTSCS

Answer 2

仅使用CSS无法完成，假设CSS没有方法可以向上遍历元素树。因此，您无法从子元素返回到父元素，然后再返回到父元素的同级。

涉及JavaScript / jQuery时，可以实现。

这里是一个快速而简短的示例，展示了如何使用jQuery实现。

JS：

$( '#nav a' ).on( 'mouseenter mouseleave', function() {
     var that = $(this);
     var target = '#' + that.data('target');
     that.toggleClass('active');
     $('#sectionTeaser').toggle().find(target).toggle();
});

HTML:

<div id="header">
    <ul id="nav">
         <li><a href="#" data-target="techSection">Tech</a></li>
         <li><a href="#" data-target="financeSection">Finance</a></li>
         <li><a href="#" data-target="politicsSection">Politics</a></li>
         <li><a href="#" data-target="strategySection">Strategy</a></li>
    </ul>
    <div id="sectionTeaser">
         <div id="techSection" class="s-teaser">Tech</div>
         <div id="financeSection" class="s-teaser">Finance</div>
         <div id="politicsSection" class="s-teaser">Politics</div>
         <div id="strategySection" class="s-teaser">Strategy</div>
     </div>
</div>
<div id="content">
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
     <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>

CSS（仅作为示例，因为您肯定需要其他样式）：

html, body {
    margin:0;
    padding:0;
    font:12px/16px Arial, Helvetica, sans-serif;
}
#header {
    position:relative;
    height:40px;
}
#nav {
    margin:0;
    padding:0;
    list-style:none; 
    font:12px/40px Arial, Helvetica, sans-serif;
}
#nav li {
    float:left;
    border:1px solid #666;
    width:25%;
    box-sizing:border-box;
    text-align:center;
}
#nav a {
    color:#333;
    text-decoration:none;
    display:block;
    height:40px;
}
#nav a.active {
    background:#999;
    color:#333;
}
#sectionTeaser {
    height:150px;
    width:100%;
    top:42px;
    position:absolute;
    display:none;
}
#sectionTeaser .s-teaser {
    display:none;
    position:absolute;
    bottom:0;
    left:0;
    top:0;
    right:0;
    height:150px;
    font:18px/150px Arial, Helvetica, sans-serif;
    background:#fff;
    text-align:center;
    text-transform:uppercese;
}

所以，这个想法是使用链接列表和通过数据属性连接的内容块。当我们悬停在一个链接上时，js（jQuery）会找到对应的块并显示它。

- CmajSmith

---

但是我该如何应用它到菜单上呢？就像这个网站的菜单[ businessinsider.com ]。我正在尝试制作类似的菜单，但是我做不来。 - Abdul Rehman

有没有人能给我一个如何做到这点的概念？ - Abdul Rehman

亲爱的CmajSmith，您的代码看起来很好。我会深入检查它，如果我能理解它，我相信它会对我非常有用。谢谢 - Abdul Rehman

CmajSmith先生，如何处理这个问题。如果我使用任何菜单的子菜单，它会在下拉菜单中打开？因为下拉菜单根据条件关闭。 - Abdul Rehman

Answer 3

如果你不想改变你的HTML结构，就必须使用JavaScript。http://jsfiddle.net/mwno6869/7/

$("#header li").mouseenter(function() {
    $('.element').css("background", "blue");
}).mouseleave(function() {
     $('.element').css("background", "green");
});

- chdltest

Answer 4

使用这段代码，它会按预期工作：

#header {
  background-color: red;
}

#header:hover ~ .element {
  background-color: blue;
}
.element {
  background-color: green;
}

<header id="header">
  <li><a href="#">Hover</a>
  </li>
</header>

  <div class="element">
      <p>hello world</p>
  </div>

- pbaldauf

---

为什么不使用可运行的代码片段？它们比 jsfiddle 更酷（而且更快）。只需点击复制到上面的答案即可。 - idmean