当鼠标悬停在另一个 div 中的按钮上时，如何更改 div 背景？
你好，正如我提到的，当我将鼠标悬停在 div 下面的按钮上时，我需要更改它的背景颜色。
基本上会有一个显示图像(T 恤标志)的 div。 在其下方将有一堆彩色按钮。 当我将鼠标悬停在这些按钮上时，我希望更改 T 恤 div 的背景。我在这方面遇到了最困难的时期。我对 javascript 或 css 持开放态度。
这似乎很有帮助，但对我不起作用 On a CSS hover event, can I change another div's styling?
这是我的代码
<!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>最佳答案
您可以使用 CSS 做到这一点，但您需要知道 div 是父元素还是兄弟元素或诸如此类的东西，所以如果您移动代码，它可能会崩溃。一个更强大的选项可能是这个简单的 jquery 函数，它查找类名并将 T 恤 div 的背景颜色设置为与悬停时按钮的背景颜色相同。
稍微修改 php 代码以添加一个 trigger_color 类:
echo'<div class="trigger_color" id="thumbnail1"><input type="button" style="background:#002B7A"/></div>';
并将这个 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
}
);
});
关于javascript - 当您将鼠标悬停在另一个 div 中的按钮上时，如何更改 div 背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30008410/