CODEWITHSUNDEEP
javascriptjqueryhtmlhovermouseout
Roelof Plas
Roelof Plas

Reputation: 51

Changing background of main div when hovering over subdiv

I have 1 container with 3 sub items and Jquery:

$(function() {
  $('.sub1').hover(function() {
    $('#container').css('background-image', 'url("../img/plan.jpg")');
  }, function() {
    // on mouseout, reset the background colour
    $('#container').css('background-color', '');
  });
});
<div id="container">
  <div class="sub1">This is link 1</div>
  <div class="sub2">This is link 2</div>
  <div class="sub3">This is link 3</div>
</div>

The goal is to change the background of "container" when hovering over "sub1", "sub2" or "sub3". Each sub has it's own background-image in css. Once mouse is not longer hovering "sub1", "sub2" or "sub3" the background will return to white.

Dont mind that theres no sub2 or sub3 functions yet, I focus on those later.

I got it working till the part of mouseout. The container background wont return to it's original state (white).

Is there some guru that can help me out?

Thanks in advance,

Roelof!

Upvotes: 1

Views: 505

Answers (3)

turbopipp
turbopipp

Reputation: 1255

You are resetting background-color instead of background-image. I took the liberty of making it work for all subs too. :)

$(function() {
  $('#container').on('mouseover', '[class^="sub"]', function() {
    var container = $('#container');
    switch ($(this).attr('class')) {
      case 'sub1':
        container.css('background-image', 'url("http://placehold.it/500x50")');
        break;
      case 'sub2':
        container.css('background-image', 'url("http://placehold.it/500x60")');
        break;
      case 'sub3':
        container.css('background-image', 'url("http://placehold.it/500x70")');
        break;
      default:
    }
  });
  
  $('#container').on('mouseout', '[class^="sub"]', function() {
    $('#container').css('background-image', '');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="container">
  <div class="sub1">This is link 1</div>
  <div class="sub2">This is link 2</div>
  <div class="sub3">This is link 3</div>
</div>

Upvotes: 2

Edwin Krause
Edwin Krause

Reputation: 1806

I think the only error in your code is that you reset the background-color instead of the background-image property

$(function() {
 $('.sub1').hover(function() { 
   $('#container').css('background-image', 'url("../img/plan.jpg")');
 }, function() {
   // on mouseout, reset the background colour
   $('#container').css('background-image', ''); // definately here is the error
 });
});

Upvotes: 3

Szymon
Szymon

Reputation: 1290

It should look like that when hover over every .sub you get color red other wise you get green And then you can just put image into it

EDITED: Add image for you on hover you get image on mouse out you get image remove and set color 

   $(function() {
      $('#container > div').hover(function() {
        $('#container').css('background-image',                   'url(http://www.placecage.com/200/300)');
        console.log("mouse over");
      }, function() {
        // on mouseover, reset the background colour
        $('#container').css({
           'background-color': 'green',
           'background-image': 'none'
        });
        console.log("mouse out");
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="container">
      <div class="sub1">This is link 1</div>
      <div class="sub2">This is link 2</div>
      <div class="sub3">This is link 3</div>
    </div>

Upvotes: 2

Related Questions