javascript - Changing background colour using js mouseover and mouseout

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. When the mouse is moved away, the background color should return to white. Why isn't my code working?

Here's my 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:

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

Here's my 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");
    });
}

Here's my 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:

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

Here's my 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");
    });
}

Share Improve this question edited Oct 31, 2014 at 0:58 APerson 8,4208 gold badges38 silver badges49 bronze badges asked Oct 30, 2014 at 23:42 sleepy 12 gold badges2 silver badges7 bronze badges

2 Are you including a link to jQuery? – Weafs.py Commented Oct 30, 2014 at 23:46
we arent supposed to use jQuery. something to do with addEventListener – sleepy Commented Oct 30, 2014 at 23:49
2 Well, apparently you are using jQuery. – Weafs.py Commented Oct 30, 2014 at 23:49
WHAT!? are you kidding me. how do i use js then? – sleepy Commented Oct 30, 2014 at 23:57
This question appears to be off-topic because it appears to be about doing someones homework. – Paulie_D Commented Oct 31, 2014 at 22:41

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Demo on Fiddle

JavaScript replacement of your jQuery code.

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Changing background colour using js mouseover and mouseout - Stack Overflow

2 Answers 2

Demo on Fiddle

JavaScript:

与本文相关的文章

评论列表(0)