CODEWITHSUNDEEP
jqueryhtmlcss
Bak
Bak

Reputation: 262

add class when mouseover

I have a situation here, I need to add some borders to the element that I hover. I'm doing it with Jquery, I searched for similar questions here but all have a specific selector like $(".myClass") or $("#myId"). But mine is with $("*"). My code is working, but the problem is that if I have an element inside another element both elements has the class that I added. And I only need to add the class to the element I have entered.

This is the HTML, is a basic example because ids an elements may change.

<div id="first">
    <div id="second">
        <h2>TESTING MOUSE OVER</h2>
    </div>
</div>

The CSS

#first{
    background-color: red;

    padding:50px;
}
#second{
    background-color: blue;
    text-align: center;

}
.over{
    border: 2px dashed black;
}

And the Jquery

$(document).ready(function(){
    $("body *").mouseover(function(){
        $(this).addClass("over");
    });
    $("body *").mouseleave(function(){
        $(this).removeClass("over");
    });
});

Here is an example: http://jsfiddle.net/k4y00sa2/ I hope I made myself clear. Thank you

Upvotes: 0

Views: 4899

Answers (4)

Jason
Jason

Reputation: 696

You mean something like this? http://jsfiddle.net/k4y00sa2/3/ 

$("body *").mouseover(function(){
    var cur = $(this);
    $(".over").removeClass("over");
    cur.addClass("over");
    return false;
});

I am removing over class wherever over class exists. And putting it to only the child element since that's the order of traversal if you hover over inner elements.

Upvotes: 1

Fiddles
Fiddles

Reputation: 2915

Attaching an event handler using $("body *") will attach the handler to every single element in the tree, so loses some performance, and won't work for dynamically added elements. Better to attach it once, delegated to the body element only.

$(document).on("mouseover", "*", function(ev) {
  $(ev.target).addClass("over");
  return false;
});
$(document).mouseout("*", function(ev) {
  $(ev.target).removeClass("over");
});
#first {
  background-color: #ffffce;
  padding: 50px;
}
#second {
  background-color: #eee;
  text-align: center;
  padding: 1em;
}
.over {
  border: 2px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="first">
  <div id="second">
    <h2>TESTING MOUSE OVER</h2>
  </div>
</div>

Upvotes: 2

Dillon
Dillon

Reputation: 707

Not sure exactly what you're looking for. It seems like you would just select the actual elements by class or type or something. But maybe something like this will help. It wont add the class if the parent of it has it already. Essentially skipping each other item through the DOM.

$(document).ready(function(){
    $("body *").mouseover(function(){
        if (!$(this).parent().hasClass("over")){
        $(this).addClass("over");
        }
    });
    $("body *").mouseleave(function(){
        $(this).removeClass("over");
    });
});

Upvotes: 0

Lu&#237;s Soares
Lu&#237;s Soares

Reputation: 6202

All nodes are handling the event. After one deals with it, you need to stop it from bubbling. By returning false, the event is not spreaded any more nor the browser will handle it anymore.

$("body *").mouseover(function(){
    $(this).addClass("over");
    return false;
});

check it

Returning false in events is a shortcut for:

ev.preventDefault();
ev.stopPropagation();

Upvotes: 0

Related Questions