i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.

I have 1 parent div with an inner submit button:

<div class="ugd_ele_normal_base">
  <input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->

What i want is for when the submit button is hovered over, the parent css changes background.

I have tried a few things, but nothing seems to work.

Thanks for the help

i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.

I have 1 parent div with an inner submit button:

<div class="ugd_ele_normal_base">
  <input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->

What i want is for when the submit button is hovered over, the parent css changes background.

I have tried a few things, but nothing seems to work.

Thanks for the help

• javascript
• jquery
• html
• css

• 1 reference.sitepoint.com/javascript/Node/parentNode – TheZ Commented Oct 15, 2012 at 22:19
• 1 With CSS4 you'll be able to do .ugd_ele_normal_base! > .ugd_ele_normal:hover { background: red; }, but that doesn't really help you right now. So I won't even bring it up. – jessegavin Commented Oct 15, 2012 at 22:23
• 1 CSS4 wtf? Wonder if we will even be alive by the times it becomes implemented :3 – nuala Commented Oct 15, 2012 at 22:28

5 Answers 5

I would use jQuery & CSS for this:

CSS

.black {
     background-color: #000000;
}

jQuery

$(function() {
   $('.ugd_ele_normal').hover( function(){
      $(this).parent().addClass("black");
   },
   function(){
      $(this).parent().removeClass("black");
   });
});

$('input.ugd_ele_normal').on({
    mouseenter: function() {
        $(this).parent().css('background', 'url(/folder/image1.jpg)');
    },
    mouseleave: function() {
        $(this).parent().css('background', 'url(/folder/image2.jpg)');
    }
});

or short(er) version:

$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
     $(this).parent()
            .css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});

and to retrieve the old image:

var bgImg = $('input.ugd_ele_normal').css('background-image'),
    hvImg = 'url(/folder/image2.jpg)';

$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
     $(this).parent()
            .css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});

or use classes:

.hoverClass {background: url(/folder/image2.jpg);}

-

$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
   $(this).toggleClass('hoverClass');
});

You can do this way.

$("#ugd_1").hover(function(){
   $(this).parent().css("background","red");
},
 function(){
      $(this).parent().css("background","none");
 });

​ ​ Live Demo :

http://jsfiddle.net/Z4QDC/2/

i would define some jquery to do this, and use a custom class.

//when the document is loaded, execute the following code
$(document).read(function(){

//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
    //we add the class black to the parent on hover
  $(this).parent().addClass("black");
},
function(){
   //and remove it on exit hover.
   $(this).parent().removeClass("black");
});
});

​ can be seen in action here: http://jsfiddle.net/xBuyC/

Try:

$('input[name="ugd_1"]').hover(function() {
    $(this).parent().css('background-color', 'COLOR');
});

Hope it helps.