CODEWITHSUNDEEP
javascriptjquery
Farhan
Farhan

Reputation: 96

How to detect mouse is now over child element and not its parent , when they have same class names

I use jquery to find currently hovered element. my html is like this: 

<div class="parent myclass">
    parent
    <div class="child myclass">
        child
    </div>    
</div>

Now i want insert border on currently hovered element with class myclass .
But when mouse is over child element jquery not detects that mouse is not over the parent.

Maybe it is asked before but i don't know how to search about it. and here is a fiddle :
http://jsfiddle.net/uxa38xjz/1/

How i can change that code, so if mouse is over the child, only child element receive class .hovered. currently when mouse is over child script not removes .hovered from parent.

edit:

This is my script:

$('.myclass').mouseover( 
function(){ 
    $(this).addClass('hovered');
} )
.mouseout(
    function(){
    $(this).removeClass('hovered');
});

And this is the css : 

.parent{
width: 100px;
height:100px;
display:block;
background-color:#eee;
margin:80px;
}

.child{
width: 70px;
height:70px;
display:block;
background-color:#00f;
}

.hovered{
-webkit-box-shadow: inset 0px 0px 0px 2px #f00;
-moz-box-shadow: inset 0px 0px 0px 2px #f00;
box-shadow: inset 0px 0px 0px 2px #f00; 
}

edit2:
Only thing that i know is that this elements has class myclass. and i don't know what is the element names or what classes they have.

Thanks.

Upvotes: 0

Views: 2996

Answers (6)

Akash kumar
Akash kumar

Reputation: 1053

you can use

$("div > p") All p elements that are a direct child of a div element

or 

:has(selector)  $("div:has(p)") 

All div elements that have a p element

customize according to your need. I hope you have been routed

Upvotes: 0

T J
T J

Reputation: 43166

You can find the particular element at the mouse position using document.elementFromPoint method as shown below:

$('.myclass').mouseover(function(e) {
  var elm = document.elementFromPoint(e.pageX, e.pageY);
  $(elm).addClass('hovered');
}).mouseout(function() {
  $(this).removeClass('hovered');
});
.parent {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #eee;
  margin: 80px;
}
.child {
  width: 70px;
  height: 70px;
  display: block;
  background-color: #00f;
}
.hovered {
  -webkit-box-shadow: inset 0px 0px 0px 2px #f00;
  -moz-box-shadow: inset 0px 0px 0px 2px #f00;
  box-shadow: inset 0px 0px 0px 2px #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent myclass">parent
  <div class="child myclass">child</div>
</div>

Upvotes: 1

Aditya
Aditya

Reputation: 1261

You could simply use the is(':hover') method to achieve this:

$('.myclass').mouseover( 
    function(){
        if($('.child').is(":hover")) {
            $('.parent').removeClass('hovered');
            $('.child').addClass('hovered');
        }
        else {
            $(this).addClass('hovered');
        }
    } )
    .mouseout(
        function(){
        $(this).removeClass('hovered');
    });
.parent{
    width: 100px;
    height:100px;
    display:block;
    background-color:#eee;
    margin:80px;
}

.child{
    width: 70px;
    height:70px;
    display:block;
    background-color:#00f;
}

.hovered{
    -webkit-box-shadow: inset 0px 0px 0px 2px #f00;
	-moz-box-shadow: inset 0px 0px 0px 2px #f00;
	box-shadow: inset 0px 0px 0px 2px #f00;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="parent myclass">
    parent
    <div class="child myclass">
        child
    </div>    
</div>

FIDDLE

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075755

You have a child class on the child elements, so a pure CSS solution would be:

.child.myclass:hover {
  border: 1px solid black;
}

...or to add a hovered class, but you really don't need it for modern browsers (or even IE8):

$(".child.myclass").hover(
    function() { $(this).addClass("hovered"); },
    function() { $(this).removeClass("hovered"); }
});

If that child class isn't really there (you were just adding it to clarify your question), I'd add it, either when writing the HTML or, if unavoidable, adding it via JavaScript on page load. Either way, I'd use CSS for the actual hover effect.

Here's an example of adding that class via JavaScript (and the CSS hover effect):

$(".myclass").filter(function() {
  return $(this).parents(".myclass").length > 0;
}).addClass("child");
.child.myclass:hover {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myclass">
    parent
    <div class="myclass">
        child
    </div>    
</div>

And here's an example using a hovered class instead:

$(".myclass").filter(function() {
  return $(this).parents(".myclass").length > 0;
}).hover(
  function() { $(this).addClass("hovered"); },
  function() { $(this).removeClass("hovered"); }
);
.hovered {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myclass">
    parent
    <div class="myclass">
        child
    </div>    
</div>

Upvotes: 0

Bharadwaj
Bharadwaj

Reputation: 2553

All you are getting is because of event bubbling, whenever an event is triggered in the child element it is caried to the top level. Try by adding return false; like below,

$('.myclass').mouseover( 
    function(){ 
        $(this).addClass('hovered');
        return false;
    } )
    .mouseout(
        function(){
        $(this).removeClass('hovered');
    });
.parent{
    width: 100px;
    height:100px;
    display:block;
    background-color:#eee;
    margin:80px;
}

.child{
    width: 70px;
    height:70px;
    display:block;
    background-color:#00f;
}

.hovered{
    -webkit-box-shadow: inset 0px 0px 0px 2px #f00;
	-moz-box-shadow: inset 0px 0px 0px 2px #f00;
	box-shadow: inset 0px 0px 0px 2px #f00;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent myclass">
    parent
    <div class="child myclass">
        child
    </div>    
</div>

Upvotes: 1

Fabian Lurz
Fabian Lurz

Reputation: 2039

Here is the solution for the mouseover-part:

function(events){ 
      var that=$(events.currentTarget);
      if(that.attr('class').match('child')){
         $(this).addClass('hovered');
      }
})

Now just change the "match" to whatever you like (parent/child) ;).

Upvotes: 0

Related Questions