Menu
How can I change div bg color From when I mouse over the another div...??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.Div1{width:100px; height:100px; background-color:red; float:left; margin-right:30px; }
.Div2{width:100px; height:100px; background-color:#00C; float:left }
</style>
</head>
<body>
<div class="Div1">asdlsakd</div>
<div class="Div2">asdsa</div>
</body>
</html>
I want to change color of div1 to yellow when i mouse over the div2 how can I???
This is my fiddle link : http://jsfiddle.net/anupkaranjkar/S5Yu5/
386
asked Sep 18 '25 12:09
jQuery way:
Try to use jQuery .show(); and .hide(); function.
HTML:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
CSS:
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
display:none;
}
jQuery:
$("#div1").hover(function() {
$("#div2").show();
},
function() {
$("#div2").hide();
});
Don't forget to link to jquery.min.js.
Add <script src="http://code.jquery.com/jquery-latest.min.js"></script> to your <head></head> tag. Otherwise it won't work.
Have a look at this fiddle
EDIT:
Pure CSS:
Put a container around your divs like this:
<div id="content">
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
</div>
after that you can use :first-child and :hover in this way:
//styling your divs
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
display:none;
}
//hover function
#content > div:first-child{
display:block;
}
#content > div:hover + div {
display:block;
}
If you want to see it in practise have a look at this demo
53
As the users above state, you should use :hover to achieve that. However they gave you an example what to do when you hover the div itself.
Your question was how to change the color if you went Hover the other div, so heres the code, this however implies that the second div is nested into the first div:
Div1:hover Div2 {
background-color: yellow;
}
Here is an example which is achieved with JQuery where it doesn't matter if they are nested or not:
var defaultBackground = $("div#two").css("background-color");
$( "div#one" )
.mouseover(function() {
$("div#two").css("background-color", "yellow");
})
.mouseout(function() {
$("div#two").css("background-color", defaultBackground);
});
http://jsfiddle.net/d58Rb/
To match your HTML code, i updated the JSFiddle: http://jsfiddle.net/S5Yu5/1/
Just in case anyone else ever needs this solution (I don't see it anywhere)
This is possible using CSS/HTML, but only if the divs are directly below eachother.
#Div1:hover + Div2 {
background-color: yellow;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
