how do i change a div background when you hover over a button in another div?
Question
How do I change a div background when you hover over a button in another div?
Hello, as I mentioned, I need to changed the background color of a div when i hover over a button below it.
Basically there will be a div that shows an image(a tshirt logo). Below that there will be a bunch of buttons that are colored. When I hover over these buttons I would like the background of the tshirt div to change. I am having the hardest time with this. I am open to javascript or css.
This seemed helpful but did not work for me On a CSS hover event, can I change another div's styling?
Here is my code
<!DOCTYPE html>
<html>
<head>
<style>
body {
background:grey;
}
#shirt {
display: block;
}
#thumbnail1 {
display: block;
}
#thumbnail1:hover {
background:white;
}
#thumbnail1:hover > #shirt {
background:green;
}
input[type="button"] {
width: 9.090%;
height: 4.090%;
display:block;
float:left;
background:red;
}
</style>
</head>
<body>
<section>
<div align="center">
<img style=" margin-left:10px;float:left; background:grey;" src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/>
<div align="center" id="shirt">
<img style="float:none" src="http://www.dudermang.com/cfaulk/3pigs.png" alt="wpf" width="760"/>
<img style="float:right; background:grey;"src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/>
</div>
</div>
<div style="padding-top:40px;">
<?php
echo'<div id="thumbnail1"><input type="button" style="background:#002B7A"/> </div>';
echo'<div id="#thumbnail2"><input type="button" style="background:#42B4E6"/></div>';
echo'<div id="#thumbnail3"><input type="button" style="background:#D2D6D9"/></div>';
echo'<div id="#thumbnail4"><input type="button"style="background:#A8A8AA"/></div>';
echo'<div id="#thumbnail5"><input type="button"style="background:#F27EB2"/></div>';
echo'<div id="#thumbnail6"><input type="button"style="background:black"/></div>';
echo'<div id="#thumbnail7"><input type="button"style="background:#474747"/></div>';
echo'<div id="#thumbnail8"><input type="button"style="background:#FE4812"/></div>';
echo'<div id="#thumbnail9"><input type="button"style="background:#7C2230"/></div>';
echo'<div id="#thumbnail10"><input type="button"style="background:#54565B"/></div>';
echo'<div id="#thumbnail11"><input type="button"style="background:#54565B"/></div>';
echo'<div id="#thumbnail12"><input type="button"style="background:#5C4A3B"/></div>';
echo'<div id="#thumbnail13"><input type="button"style="background:#B2BC00"/></div>';
echo'<div id="#thumbnail14"><input type="button"style="background:#EBBECB"/></div>';
echo'<div id="#thumbnail15"><input type="button"style="background:#6241"/></div>';
echo'<div id="#thumbnail16"><input type="button"style="background:#5E8AB4"/></div>';
echo'<div id="#thumbnail17"><input type="button"style="background:#892034"/></div>';
echo'<div id="#thumbnail18"><input type="button"style="background:#AA1054"/></div>';
echo'<div id="#thumbnail19"><input type="button"style="background:#2D1B46"/></div>';
echo'<div id="#thumbnail20"><input type="button"style="background:#3B5E75"/></div>';
echo'<div id="#thumbnail21"><input type="button"style="background:#CC092F"/></div>';
echo'<div id="#thumbnail22"><input type="button"style="background:#18453B"/></div>';
echo'<div id="#thumbnail23"><input type="button"style="background:#FFB300"/></div>';
echo'<div id="#thumbnail24"><input type="button"style="background:#253355"/></div>';
echo'<div id="#thumbnail25"><input type="button"style="background:#007E3A"/></div>';
echo'<div id="#thumbnail26"><input type="button"style="background:#A59D87"/></div>';
echo'<div id="#thumbnail27"><input type="button"style="background:#55BE47"/></div>';
echo'<div id="#thumbnail28"><input type="button"style="background:#8CB4E8"/></div>';
echo'<div id="#thumbnail29"><input type="button"style="background:#4E2029"/></div>';
echo'<div id="#thumbnail30"><input type="button"style="background:#3A4C00"/></div>';
echo'<div id="#thumbnail31"><input type="button"style="background:#F3ECE6"/></div>';
echo'<div id="#thumbnail32"><input type="button"style="background:#A3D869"/></div>';
echo'<div id="#thumbnail33"><input type="button"style="background:#FF1CAC"/></div>';
echo'<div id="#thumbnail34"><input type="button"style="background:#E9E73F"/></div>';
echo'<div id="#thumbnail35"><input type="button"style="background:#D5C4A1"/></div>';
echo'<div id="#thumbnail36"><input type="button"style="background:#FF9C71"/></div>';
echo'<div id="#thumbnail37"><input type="button"style="background:#38B8FF"/></div>';
echo'<div id="#thumbnail38"><input type="button"style="background:#502D7F"/></div>';
echo'<div id="#thumbnail39"><input type="button"style="background:#FF585E"/></div>';
echo'<div id="#thumbnail40"><input type="button"style="background:#006F44"/></div>';
echo'<div id="#thumbnail41"><input type="button"style="background:#D00063"/></div>';
echo'<div id="#thumbnail42"><input type="button"style="background:#7566A0"/></div>';
echo'<div id="#thumbnail43"><input type="button"style="background:#385E9D"/></div>';
echo'<div id="#thumbnail44"><input type="button"style="background:#1D4F91"/></div>';
echo'<div id="#thumbnail45"><input type="button"style="background:#948771"/></div>';
echo'<div id="#thumbnail46"><input type="button"style="background:#E8FF6B"/></div>';
echo'<div id="#thumbnail47"><input type="button"style="background:#FF6C3B"/></div>';
echo'<div id="#thumbnail48"><input type="button"style="background:#89A386"/></div>';
echo'<div id="#thumbnail49"><input type="button"style="background:#47C7C7"/></div>';
echo'<div id="#thumbnail50"><input type="button"style="background:#D4D4E0"/></div>';
echo'<div id="#thumbnail51"><input type="button"style="background:#FF7900"/> </div>';
echo'<div id="#thumbnail52"><input type="button"style="background:#A7192D"/></div>';
echo'<div id="#thumbnail53"><input type="button"style="background:#FFFFFF"/></div>';
echo'<div id="#thumbnail54"><input type="button"style="background:#5E2751"/></div>';
echo'<div id="#thumbnail55"><input type="button"style="background:#FFE000"/></div>';
?>
</div>
</section>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> body { background:grey; } #shirt { display: block; } #thumbnail1 { display: block; } #thumbnail1:hover { background:white; } #thumbnail1:hover > #shirt { background:green; } input[type="button"] { width: 9.090%; height: 4.090%; display:block; float:left; background:red; } </style> </head> <body> <section> <div align="center"> <img style=" margin-left:10px;float:left; background:grey;" src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/> <div align="center" id="shirt"> <img style="float:none" src="http://www.dudermang.com/cfaulk/3pigs.png" alt="wpf" width="760"/> <img style="float:right; background:grey;"src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/> </div> </div> <div style="padding-top:40px;"> <?php echo'<div id="thumbnail1"><input type="button" style="background:#002B7A"/></div>'; echo'<div id="#thumbnail2"><input type="button" style="background:#42B4E6"/></div>'; echo'<div id="#thumbnail3"><input type="button" style="background:#D2D6D9"/></div>'; echo'<div id="#thumbnail4"><input type="button"style="background:#A8A8AA"/></div>'; echo'<div id="#thumbnail5"><input type="button"style="background:#F27EB2"/></div>'; echo'<div id="#thumbnail6"><input type="button"style="background:black"/></div>'; echo'<div id="#thumbnail7"><input type="button"style="background:#474747"/></div>'; echo'<div id="#thumbnail8"><input type="button"style="background:#FE4812"/></div>'; echo'<div id="#thumbnail9"><input type="button"style="background:#7C2230"/></div>'; echo'<div id="#thumbnail10"><input type="button"style="background:#54565B"/></div>'; echo'<div id="#thumbnail11"><input type="button"style="background:#54565B"/></div>'; echo'<div id="#thumbnail12"><input type="button"style="background:#5C4A3B"/></div>'; echo'<div id="#thumbnail13"><input type="button"style="background:#B2BC00"/></div>'; echo'<div id="#thumbnail14"><input type="button"style="background:#EBBECB"/></div>'; echo'<div id="#thumbnail15"><input type="button"style="background:#6241"/></div>'; echo'<div id="#thumbnail16"><input type="button"style="background:#5E8AB4"/></div>'; echo'<div id="#thumbnail17"><input type="button"style="background:#892034"/></div>'; echo'<div id="#thumbnail18"><input type="button"style="background:#AA1054"/></div>'; echo'<div id="#thumbnail19"><input type="button"style="background:#2D1B46"/></div>'; echo'<div id="#thumbnail20"><input type="button"style="background:#3B5E75"/></div>'; echo'<div id="#thumbnail21"><input type="button"style="background:#CC092F"/></div>'; echo'<div id="#thumbnail22"><input type="button"style="background:#18453B"/></div>'; echo'<div id="#thumbnail23"><input type="button"style="background:#FFB300"/></div>'; echo'<div id="#thumbnail24"><input type="button"style="background:#253355"/></div>'; echo'<div id="#thumbnail25"><input type="button"style="background:#007E3A"/></div>'; echo'<div id="#thumbnail26"><input type="button"style="background:#A59D87"/></div>'; echo'<div id="#thumbnail27"><input type="button"style="background:#55BE47"/></div>'; echo'<div id="#thumbnail28"><input type="button"style="background:#8CB4E8"/></div>'; echo'<div id="#thumbnail29"><input type="button"style="background:#4E2029"/></div>'; echo'<div id="#thumbnail30"><input type="button"style="background:#3A4C00"/></div>'; echo'<div id="#thumbnail31"><input type="button"style="background:#F3ECE6"/></div>'; echo'<div id="#thumbnail32"><input type="button"style="background:#A3D869"/></div>'; echo'<div id="#thumbnail33"><input type="button"style="background:#FF1CAC"/></div>'; echo'<div id="#thumbnail34"><input type="button"style="background:#E9E73F"/></div>'; echo'<div id="#thumbnail35"><input type="button"style="background:#D5C4A1"/></div>'; echo'<div id="#thumbnail36"><input type="button"style="background:#FF9C71"/></div>'; echo'<div id="#thumbnail37"><input type="button"style="background:#38B8FF"/></div>'; echo'<div id="#thumbnail38"><input type="button"style="background:#502D7F"/></div>'; echo'<div id="#thumbnail39"><input type="button"style="background:#FF585E"/></div>'; echo'<div id="#thumbnail40"><input type="button"style="background:#006F44"/></div>'; echo'<div id="#thumbnail41"><input type="button"style="background:#D00063"/></div>'; echo'<div id="#thumbnail42"><input type="button"style="background:#7566A0"/></div>'; echo'<div id="#thumbnail43"><input type="button"style="background:#385E9D"/></div>'; echo'<div id="#thumbnail44"><input type="button"style="background:#1D4F91"/></div>'; echo'<div id="#thumbnail45"><input type="button"style="background:#948771"/></div>'; echo'<div id="#thumbnail46"><input type="button"style="background:#E8FF6B"/></div>'; echo'<div id="#thumbnail47"><input type="button"style="background:#FF6C3B"/></div>'; echo'<div id="#thumbnail48"><input type="button"style="background:#89A386"/></div>'; echo'<div id="#thumbnail49"><input type="button"style="background:#47C7C7"/></div>'; echo'<div id="#thumbnail50"><input type="button"style="background:#D4D4E0"/></div>'; echo'<div id="#thumbnail51"><input type="button"style="background:#FF7900"/></div>'; echo'<div id="#thumbnail52"><input type="button"style="background:#A7192D"/></div>'; echo'<div id="#thumbnail53"><input type="button"style="background:#FFFFFF"/></div>'; echo'<div id="#thumbnail54"><input type="button"style="background:#5E2751"/></div>'; echo'<div id="#thumbnail55"><input type="button"style="background:#FFE000"/></div>'; ?> </div> </section> </body> </html>
3 answers
solution1
1
First, give the Div id name like "mydiv"
second, make a button hover event. put inside this event
document.getElementById("mydiv").background = new color;
solution2
1 2015-05-02 23:03:32
give your button and div an ID. create a class which represents the hover and the default state. set each state on mouseover and mouseout of your button.
there are more elegant ways depending on framework, and if you care about maintaining classes not part of the transition, but this is the general idea:
window.onload = function() {
var div = document.getElementById("your-div-id-here"),
btn = document.getElementById("your-btn-id-here");
btn.onmouseover = function(e) {
div.class = "over-class-name";
};
btn.onmouseout = function(e) {
div.class = "default-class-name";
};
};
solution3
1 ACCPTED 2015-05-02 23:14:06
You could do this with CSS but you'd need to know if the divs were parents or siblings or whatnot so if you move the code around it could fall apart. A more robust option could be this simple jquery function which looks for a classname and sets the tshirt div's background colour the same as the button's background colour on hover.
Slightly alter the php code to add a class of trigger_color:
echo'<div class="trigger_color" id="thumbnail1"><input type="button" style="background:#002B7A"/></div>';
and stick this jQuery function somewhere:
$(document).ready(function(){
$( ".trigger_color" ).hover(
function() {
$("#shirt").css("background-color", $("input", this).css("background-color"));
}, function() {
$("#shirt").css("background-color", "gray"); //back to normal
}
);
});
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.
Related Question
Change background image when hover hover over div with jQuery
To change the background image of a div when the mouse hover on another div
How do I make text appear in a div when I hover over another?
How to change DIV background when i hover a link?
How to change a div background image when hover an other div
How to change the div style when you move the mouse over another element in another div?
How to change the div when i hover a li
Hover over one div and change another
hover over one div and change background of a different div
How to change div background image upon hover and clicking but only leave when clicking back button?
Related Tags