Stop Propagation not working Jquery

Question

Hi guys when i enter one of my div i should indicate it with making its border black but even if i use stoppropagation it add border all parent divs. Is there any way to make my hover just for child div? My divs are changing its position when i add border??

 $('div').hover(function(e) { e.stopPropagation(); }); function run() { var div = document.createElement("div"); div.style.backgroundColor = "green"; //create new div div.style.height = "100%"; div.style.width = "50%"; div.style.left = "0.1%"; div.addEventListener("click", run); //bind click to new div this.appendChild(div); var div = document.createElement("div"); div.style.backgroundColor = "red"; //create new div div.style.height = "100%"; div.style.position = "relative"; div.style.height = "100%"; div.style.width = "49.8%"; div.style.left = "50.1%"; div.style.top = "-100%"; div.addEventListener("click", run); //bind click to new div this.appendChild(div); this.removeEventListener("click", run); //remove the original click event } document.getElementById("start").addEventListener("click", run); //bind the initial click event 

 html, body { height: 100%; } div#start { border: 1px solid black; width: 500px; height: 30px; } div:hover { border: 2px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="start" width='400px' height='30px'></div> 

Answer 1

As noted in comments, https://api.jquery.com/event.stoppropagation/ only affects the event itself, no interaction with css.

event.stopPropagation()

Returns:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Handlers being event handlers, such as https://api.jquery.com/hover/ , not to be confused with css psuedo-code like ':hover', ':link', ':active' , ect ( http://www.w3schools.com/css/css_link.asp )

Look instead at rethinking your css and making use of greater specifity or even the '!important' suffix on a rule to stop it being overriden.

Also, use of the jquery $.hover ( https://api.jquery.com/hover/ ) can be useful for applying classes dynamically that require no complex mapping of css.

Answer 2

You should not do anything with javascript. All that is needed is CSS.

just add a :hover selector to the divs you want to change border on. Since all parent divs are also hovered at the same time, you need to make a selector that doesn't affect those divs. Add a class like hover-sensitive to the div you want to set border on, and use that in your selector

div.hover-sensitive:hover {
    border: 2px solid black;
}

Update:

To not make the border move the div around, use the css attribute outline instead of border . Its syntax is the same as for border.