JQuery - darker div when hover on another div
Question
I want something like this link . If user hover header section another part of page will be darker than normal. Here is my code:
Index.html:
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#generalHeader").load("header.html");
});
</script>
</head>
<body cz-shortcut-listen="true">
<div id="generalHeader"></div>
<div class="yellow">
</div>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Now , my page look likes this :
I want to yellow section will be darker if user hover on generalHeader .
Any suggestion?
3 answers
solution1
4 2016-02-19 20:35:46
You can use css :hover , filter , brightness , transition
section { width:300px; height:200px; background:yellow; transition: all 1s; } header { background: yellow; border: 1px solid green; width:298px; text-align:center; } header:hover + section { -webkit-filter: brightness(0.8); -moz-filter: brightness(0.8); filter: brightness(0.8); }
<header>hover</header> <section></section>
solution2
1 2016-02-19 20:20:42
Set the background color of the body to black (or overlay the yellow div on top of a black div), and then change the opacity of the yellow div in the relevant event handlers.
$(function() {
$("#generalHeader").hover(function() {
$(".yellow").stop().fadeTo(1200, .5);
});
$("#generalHeader").mouseout(function() {
$(".yellow").stop().fadeTo(600, 1);
});
});
solution3
0 2016-02-19 20:24:29
You can do it just changing the color, but you can try playing with the opacity too. Take a look using JQuery:
function headerHover(){
$("#generalHeader").hover(
function(){
// Opacity
$(".yellow").css("opacity", "0.6");
// Color
$(".yellow").css("background-color", "#A8A810");
},
function(){
// Return to normal when mouse leave
$(".yellow").css("opacity", "1");
$(".yellow").css("background-color", "yellow");
})
};
As you can see hover() takes two functions, the first one is what to do on mouse hover and the second if when mouse leave. I used the classes in the code you posted just change "generalHeader" and "yellow" for what you need.
Now also you can do it adding a CSS class:
CSS file:
.mainHover{
opacity:0.6;
bakground-color:#A8A810;
}
JavaScript:
function headerHover(){
$("#generalHeader").hover(
function(){
$(".yellow").addClass("mainHover");
},
function(){
// Return to normal when mouse leave
$(".yellow").removeClass("mainHover");
})
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.