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

Question

The tilde sign(~) only works on #header . But if I want to try it on li tag it's not working because it's inside of #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

Do like this:

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

You have all your li elements inside the #header. So, the div with class="element" will always be placed after the header. There is no need to select the li:hover

Answer 2

It is not possible to complete with CSS only, assuming CSS has no methods to go up the elements tree. So you can't go back from child element to parent and then to parent's sibling. It is possible to make with javascript/jQuery being involved.

Here is some quick and tiny example of how this can be using 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 (just for the sake of example, as you definitely need some other styling):

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

So, the idea is to use list of links and separated blocks with content which are connected by data -attribute. Once we hover a link, js (jQuery) finds the corresponding block and reveals it.

Answer 3

With this code it works as expected:

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

Answer 4

You'll have to use javascript if you dont want to change your HTML structure. http://jsfiddle.net/mwno6869/7/

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