Changing parent css on child hover

css, html, javascript, jquery

Solution

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

Problem

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

Original source