Apply a CSS hover effect to an element that is not a child of the hovering element
The tilde (~) only works on #header
. But if I want to try the li tag doesn't work because it's inside #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>
source to share
Do the following:
#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 li elements inside #header. This way a div with a class = "element will always be placed after the header. No need to select li: hover
source to share
It is impossible to execute CSS alone, assuming that CSS has no methods to navigate to the element tree. Thus, you cannot go back from the child to the parent and then to the parent sibling. Can be done with javascript / jQuery.
Here are some quick and tiny examples of how jQuery can be used.
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 example, since you definitely need some other style):
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 a list of links and delimited blocks with content that is associated with data
-attribute. As soon as we hover over the link, js (jQuery) finds the corresponding block and displays it.
source to share
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>
source to share
You will need to use javascript if you don't 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");
});
source to share