jquery - Selecting top layer element with .hover() -

is there way select top layer element on hover?

for example, let's have 2 divs. in first 1 top layer span.mytext1, if hover off span remain in div, div top layer hover over.

similar example applies second div, except has more layers.

i .addclass('outline ') top layer only.

css

.outline {     outline: 5px solid #66ff66; } 

html

<div class="divs">     <span class="mytext1">some text</span>     </div>  <div class="mydiv2">     <div style="width:300px">           <span class="mytext2">some text <button value="mybutton"></span>     </div> </div> 

i think .hover() way go not sure how.

$(mytoplayer).hover(     function() {         $(this).addclass('outline');                     },     function () {         $(this).removeclass('outline');     } ); 

update - misunderstood question; previous answer doing opposite of wanted!

on hover in, add class current element , remove of parents , on hover out, remove class element , add immediate parent div using first()

note code using generic div , span, might want use specific ones doesn't happen div , span on page.

see demo

$(function () {     $("div,span").hover(      function (e) {         $(this).addclass('outline').parents().removeclass('outline');         e.stoppropagation();     },      function (e) {         $(this).removeclass('outline').parents("div").first().addclass('outline');     }); }); 

---

previous answer -

in function check if there parent div or not before applying style. if parent div exists, add style last parent (top most) else apply style current element.

you might want change selector in $("div").hover(...) specific parent div property.

see demo

$(function () {     $("div").hover(      function () {         if ($(this).parents("div").size() > 0) {             $(this).parents("div").last().addclass('outline');         } else {             $(this).addclass('outline');         }     },      function () {          if ($(this).parents("div").size() > 0) {             $(this).parents("div").last().removeclass('outline');         } else {             $(this).removeclass('outline');         }      });   });