CODEWITHSUNDEEP
javascripthtmlcss
sleepy
sleepy

Reputation: 1

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

Upvotes: 0

Views: 14982

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

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>

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

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

Upvotes: 2

Related Questions