CODEWITHSUNDEEP
javascriptjquerycss
user3211188
user3211188

Reputation: 81

Change the parent background-image/color for each child on hover

I want my parent div to change background-color/image depending on witch child div is hovered. I need 4 different childs div to affect the parent.

<div id="container">
    <div id="Div1" class="elmt">div1</div>
    <div id="Div2" class="elmt">div2</div>
    <div id="Div3" class="elmt">div3</div>
    <div id="Div4" class="elmt">div4</div>
</div>

little fiddle test (not working -_-') http://jsfiddle.net/TyL6G/3/

Upvotes: 2

Views: 1271

Answers (2)

user3211188
user3211188

Reputation: 81

This is my solution with dynamic tag. If you find a better way to do it you are welcome to share. :)

jQuery

$(function() {
$('#container>div[image]').hover( function(){
  $(this).parent().css("background-image",$(this).attr("image"));
   },
   function(){
      $(this).parent().css('background-image','url(link.jpg)');
   });
});

check the fiddle: http://jsfiddle.net/TyL6G/15/

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240878

This is a specificity issue. The .newColor class background color does not overwrite the #container background color because an id is more specific than a class.

Use a more specific selector to apply the background:

#container.newColor {
    background-color:yellow;
}

UPDATED EXAMPLE

Upvotes: 2

Related Questions