Question

当盒子悬停在上面时，我应该将包含任务的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");
    });
}

Answer 1

Fiddle

上的演示

JavaScript替换你的jQuery代码。

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

这是一个完整的例子：

<!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 个答案:

Fiddle

的JavaScript：