Как изменить фон div, когда вы наводите курсор на кнопку в другом div?
Как изменить фон div, когда вы наводите курсор на кнопку в другом div?
Здравствуйте, как я уже говорил, мне нужно изменить цвет фона div, когда я наведу курсор на кнопку под ним.
В основном будет div, который показывает изображение (логотип футболки). Ниже этого будет куча кнопок, которые окрашены. Когда я наведу курсор на эти кнопки, мне бы хотелось, чтобы фон футболки изменился. У меня самое сложное время с этим. Я открыт для JavaScript или CSS.
Это показалось полезным, но не сработало для меня. При событии наведения мыши на CSS, могу ли я изменить стиль другого div?
Вот мой код
<!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 ответа
Решение
Вы можете сделать это с помощью CSS, но вам нужно знать, были ли div-ы родителями, братьями и сестрами или еще чем-то, поэтому, если вы перемещаете код, он может развалиться. Более надежной опцией может быть эта простая функция jquery, которая ищет имя класса и устанавливает цвет фона элемента футболки такой же, как цвет фона кнопки при наведении курсора.
Немного измените код 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
}
);
});
Во-первых, назовите имя Div как "mydiv".
во-вторых, сделайте событие наведения кнопки. положить внутри этого события
document.getElementById("mydiv").background = new color;
Дайте свою кнопку и поделите ID. создать класс, который представляет наведение и состояние по умолчанию. установите каждое состояние при наведении курсора мыши на кнопку.
Есть более элегантные способы в зависимости от фреймворка, и если вы заботитесь о поддержании классов, не являющихся частью перехода, но это общая идея:
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";
};
};