How do I change a div background when you hover over a button in another div?
当您将鼠标悬停在另一个div中的按钮上时,如何更改div背景?
Hello, as I mentioned, I need to changed the background color of a div when i hover over a button below it.
您好,正如我所提到的,当我将鼠标悬停在其下方的按钮上时,我需要更改div的背景颜色。
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.
基本上会有一个显示图像的div(一个T恤标志)。下面会有一堆彩色的按钮。当我将鼠标悬停在这些按钮上时,我希望tshirt div的背景能够改变。我正在度过最艰难的时光。我对javascript或css持开放态度。
This seemed helpful but did not work for me On a CSS hover event, can I change another div's styling?
这似乎有帮助,但对我不起作用在CSS悬停事件中,我可以更改另一个div的样式吗?
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 个解决方案
#1
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.
你可以用CSS做到这一点但是你需要知道div是父母还是兄弟姐妹还是其他什么所以如果你移动代码它可能会分崩离析。一个更健壮的选项可能是这个简单的jquery函数,它查找一个类名,并将tshirt div的背景颜色设置为与悬停时按钮的背景颜色相同。
Slightly alter the php code to add a class of trigger_color:
略微修改php代码以添加一类trigger_color:
echo'<div class="trigger_color" id="thumbnail1"><input type="button" style="background:#002B7A"/></div>';
and stick this jQuery function somewhere:
并坚持这个jQuery函数:
$(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
}
);
});
#2
First, give the Div id name like "mydiv"
首先,将Div id命名为“mydiv”
second, make a button hover event. put inside this event
第二,做一个按钮悬停事件。放进这个活动
document.getElementById("mydiv").background = new color;
document.getElementById(“mydiv”)。background = new color;
#3
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.
给你的按钮和div一个ID。创建一个表示悬停和默认状态的类。在鼠标悬停和鼠标按钮上设置每个状态。
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";
};
};
#1
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.
你可以用CSS做到这一点但是你需要知道div是父母还是兄弟姐妹还是其他什么所以如果你移动代码它可能会分崩离析。一个更健壮的选项可能是这个简单的jquery函数,它查找一个类名,并将tshirt div的背景颜色设置为与悬停时按钮的背景颜色相同。
Slightly alter the php code to add a class of trigger_color:
略微修改php代码以添加一类trigger_color:
echo'<div class="trigger_color" id="thumbnail1"><input type="button" style="background:#002B7A"/></div>';
and stick this jQuery function somewhere:
并坚持这个jQuery函数:
$(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
}
);
});
#2
First, give the Div id name like "mydiv"
首先,将Div id命名为“mydiv”
second, make a button hover event. put inside this event
第二,做一个按钮悬停事件。放进这个活动
document.getElementById("mydiv").background = new color;
document.getElementById(“mydiv”)。background = new color;
#3
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.
给你的按钮和div一个ID。创建一个表示悬停和默认状态的类。在鼠标悬停和鼠标按钮上设置每个状态。
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";
};
};