Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

[jQuery] Change Parent Div Background when hover on Child Element

change-parent--bg-color-hover-child

Hi Friends,

If you wanted to do some action with parent element when anyone hover on its child elements, you can do it using jQuery functions. jQuery is easy to use and with short couple of lines, you can do a lot more. This is the only reason, jQuery is a famous now days. In this blog post provide solution related with jQuery.

Here I am showing you how to change the parent div background color when anyone hover on child element. Below is HTML code.

HTML Code of Parent-Child Elements

<div id="outer_div">
 <a href="/">jQuery</a>
 <a href="/">PHP</a>
 <a href="/">WordPress</a>
 <a href="/">Magento</a>
</div>

I want to change the background color of Div element when hover on any of the element. Here

is a parent element of element. Look at below jQuery code to achieve it.

jQuery code to change parent background color on hover of Child Element

var outer_div = jQuery('#outer_div');
outer_div.find("a").hover(function(){
   // mouseenter event
   outer_div.css({backgroundColor: "orange"});
}, function(){
   // mouseleave event
   outer_div.css({backgroundColor: "white"});
});

If you want to find the existing background color of parent element and set it back when mouse leave from child element, here is code to get background color of existing element.

Background Color of Parent Div

var outer_div = jQuery('#outer_div');
var outer_div_bg = outer_div.css("background-color");

Want to Change Parent Div Background when hover on Child Element ? Looking to set Parent Element CSS hover on child element using jQuery, Set Background color of Parent Div on child element hover, searching for mouse enter and mouse leave events of jQuery ?

Share:

No Comments Yet.

Leave a Reply

Your email address will not be published.