使用js mouseover和mouseout更改背景颜色

Question

I am supposed to change the background color of the div that contains a task to the color in each box when the box is hovered over. 当框悬停在框上时，我应该将包含任务的div的背景色更改为每个框的颜色。 When the mouse is moved away, the background color should return to white. 当鼠标移开时，背景色应恢复为白色。 Why isn't my code working? 为什么我的代码不起作用？

Here's my HTML: 这是我的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>

And my CSS: 而我的CSS：

.t1_colors {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border: 1px solid rgb(111, 61, 69);
}

Here's my JavaScript: 这是我的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");
    });
}

Answer 1

Demo on Fiddle 小提琴演示

JavaScript replacement of your jQuery code. 用JavaScript替换您的jQuery代码。

JavaScript: JavaScript：

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';
    });
}

Answer 2

Demo link 演示链接

  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";
    }
  }

Here's a complete example: 这是一个完整的示例：

<!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>

使用js mouseover和mouseout更改背景颜色

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-10-30 23:45:20

Demo on Fiddle 小提琴演示

JavaScript: JavaScript：

解决方案2
0 2014-10-30 23:51:01

使用js mouseover和mouseout更改背景颜色

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-10-30 23:45:20

Demo on Fiddle 小提琴演示

JavaScript: JavaScript：

解决方案2 0 2014-10-30 23:51:01

解决方案1
1 已采纳 2014-10-30 23:45:20

解决方案2
0 2014-10-30 23:51:01