[英]Changing background colour using js mouseover and mouseout
當框懸停在框上時,我應該將包含任務的div的背景色更改為每個框的顏色。 當鼠標移開時,背景色應恢復為白色。 為什么我的代碼不起作用?
這是我的HTML:
<div id="task1" class="task">
<h2>Task 1</h2>
<div id="t1_color_one" class="t1_colors" style="background: hotpink;"></div>
<div id="t1_color_two" class="t1_colors" style="background: lightgreen;"></div>
<div id="t1_color_three" class="t1_colors" style="background: palevioletred;"></div>
</div>
而我的CSS:
.t1_colors {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
border: 1px solid rgb(111, 61, 69);
}
這是我的JavaScript:
$(document).ready(function () {
$("t1_color_one").mouseover(function () {
var $c = $(this).css("background-color");
$("#task1").css('background-color', "black");
}).mouseout(function () {
$("#task1").css('background-color', "white");
});
}
用JavaScript替換您的jQuery代碼。
var divs = document.getElementsByClassName('t1_colors');
var mainDiv = document.getElementById('task1');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('mouseover', function () {
mainDiv.style.backgroundColor = window.getComputedStyle(this).backgroundColor;
});
divs[i].addEventListener('mouseleave', function () {
mainDiv.style.backgroundColor = 'white';
});
}
var taskEl = document.getElementById('task1');
var t1El = document.querySelectorAll(".t1_colors");
for(var i=0; i<t1El.length; i++){
t1El[i].addEventListener("mouseenter", hoverColor ,false);
t1El[i].addEventListener("mouseleave", hoverColor ,false)
}
function hoverColor(event){
var myColor = this.style.backgroundColor;
if(event.type === "mouseenter"){
taskEl.style.backgroundColor = myColor;
}else{
taskEl.style.backgroundColor = "white";
}
}
這是一個完整的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="task1" class="task">
<h2>Task 1</h2>
<p>Change the background color, of the div that contains this task, to the color in each box when the box is hovered over.</p>
<p>When the mouse stops hovering over the box, change the background color back to white.</p>
<div id="t1_color_one" class="t1_colors" style="background: hotpink;"></div>
<div id="t1_color_two" class="t1_colors" style="background: lightgreen;"></div>
<div id="t1_color_three" class="t1_colors" style="background: palevioletred;"></div>
</div>
<script>
var taskEl = document.getElementById('task1');
var t1El = document.querySelectorAll(".t1_colors");
for(var i=0; i<t1El.length; i++){
t1El[i].addEventListener("mouseenter", hoverColor ,false);
t1El[i].addEventListener("mouseleave", hoverColor ,false)
}
function hoverColor(event){
var myColor = this.style.backgroundColor;
if(event.type === "mouseenter"){
taskEl.style.backgroundColor = myColor;
}else{
taskEl.style.backgroundColor = "white";
}
}
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.