Question

波浪符号（〜）仅适用于#header。但如果我想尝试一下 li标记它不起作用，因为它在#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>

Answer 1

这样做：

＆＃13;

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

＆＃13;

<header id="header">
      <li><a href="#">Hover</a>
      </li>
    </header>

    <div class="element">
      <p>hello world</p>
    </div>

＆＃13;

你有#header里面的所有li元素。所以，div为class =＆＃34; element＆＃34;将始终放在标题之后。无需选择li：hover

Answer 2

仅使用CSS无法完成，假设CSS没有方法可以使用元素树。所以你不能从子元素返回到父元素然后再转移到父母的兄弟元素。可以使用javascript / jQuery。

以下是一些快速而微小的example如何使用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;
}

因此，我们的想法是使用链接列表和分隔的块以及通过data - 属性连接的内容。一旦我们悬停链接，js（jQuery）就会找到相应的块并显示它。

Answer 3

使用此代码可以按预期工作：

＆＃13;

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

＆＃13;

<header id="header">
  <li><a href="#">Hover</a>
  </li>
</header>

  <div class="element">
      <p>hello world</p>
  </div>

＆＃13;

Answer 4

如果您不想更改HTML结构，则必须使用javascript。 http://jsfiddle.net/mwno6869/7/

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

将CSS悬停效果应用于不是悬停元素的子元素的元素

4 个答案: