Why jquery method addClass() is not working?

Question

1.00/5 (1 vote)

See more:

HTML

<html>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style type="text/css">

.abc
{
    background-color:green;
    font-size:200%;
}

.red
{
    background-color:red;
    font-size:200%;
}



</style>
<body>

<p class="abc">ABC</p>



</body>


<script type="text/javascript">


$(document).ready(function(){
  $(".abc").mouseenter(function(){
    $(".abc").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").addClass("red");
  });
});

</script>



</html>

Posted 31-Jul-13 5:03am

Infinity Signal

Updated 29-Sep-21 0:31am

Add a Solution

Comments

ZurdoDev 31-Jul-13 11:29am

I don't know why? Did you look in your developer tools to see if it did apply it?

2 solutions

Solution 1

This is just the pure logic looks entangled. You add a class but never remove any.

Do a simple thing: have two different classes. On enter and leave, always remove one class and add another one. Also, you can simplify your code if you use the .hover method instead, it accepts two handler, one for moving in, another one for moving out:
http://api.jquery.com/hover/[^].

See also:
http://api.jquery.com/category/css/[^],
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^].

—SA

Posted 31-Jul-13 5:55am

Sergey Alexandrovich Kryukov

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rick Plumer · Accepted Answer · 2013-07-31T07:49:00

The class 'red' is added to the div when the mouse leaves. However because you are adding in-line CSS styling during the mouseenter function, it supersedes the CSS styling.

<style type="text/css">
#ex
{
background: red;
}
</style>

<div id="ex" style="background: yellow">

</div>

The div will show up with a yellow background. This is essentially what you are doing.

I would create a second class named 'yellow' on mouseenter add the 'yellow' class. on mouseleave remove the 'yellow' class and add the 'red' class.