Add class with jQuery

Question

I try to add class to my div. How? Look bottom:

$(document).ready(function(){
    		$(".menu-div").hover(function(){
       		 $(this).addClass("menu-div-hover");
   	        });
});

.menu-div-hover{
     background-color:#25262A;
}

.menu-div{
          height:50px;
          border-top:;
          border-bottom:;
    background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href=""><div class="text-center menu-div">FAQ</div></a>

It is my http://jsfiddle.net/pj4oqffu/ What I did wrong? I don't want answers, I need to learn it. If you can help me, please do it :)

It works , you need to replace 'menu-div-hover ' after 'menu-div' — Alex
– Alex, Commented Oct 11, 2015 at 12:28

Darren · Accepted Answer · 2015-10-11 12:21:31Z

4

Why use jQuery at all?

Simply use CSS and the :hover selector:

.menu-div:hover{
     background-color:#25262A;
}

If you need to do it via jQuery, simply move the hover class below the original (Your jQuery code is fine).

.menu-div
{
  height:50px;
  border-top:;
  border-bottom:;
  background-color:yellow;
}

.menu-div-hover
{
  background-color:#25262A;
}

Which will take precedence, you can also use !important on the hover background colour.

http://jsfiddle.net/pj4oqffu/1/

edited Oct 11, 2015 at 12:21

answered Oct 11, 2015 at 12:18

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

patwoj98 Over a year ago

Nice it is it. Do you know how to do it with jQuery? Its working but I need to know the same in jQuery :)

MorKadosh Over a year ago

your js code was ok, you just have to "override" the class backround property using !important jsfiddle.net/pj4oqffu/2

wero · Accepted Answer · 2015-10-11 12:22:33Z

3

If you want to user $.hover then you need to set and remove the class:

 $(document).ready(function(){
     $(".menu-div").hover(
         function(){
             $(this).addClass("menu-div-hover");
         },
         function(){
             $(this).removeClass("menu-div-hover");
        });
 });

Also you need to define .menu-div-hover after .menu-div in order to overwrite the background-color during hover.

answered Oct 11, 2015 at 12:22

wero

33.1k3 gold badges63 silver badges87 bronze badges

Comments

Raju Bera · Accepted Answer · 2015-10-11 12:31:32Z

1

No sure why you are using jquery for that where you can simply do that using css. But to your problem the solution is you need to add important tag to your css as following:

.menu-div-hover{
     background-color:#25262A !important;
}

Here is the edit of your code example: http://jsfiddle.net/pj4oqffu/3/

But I strongly suggest you do that using plain css as following:

.menu-div:hover{
     background-color:#25262A !important;
}

Check the fiddle: http://jsfiddle.net/pj4oqffu/5/

answered Oct 11, 2015 at 12:31

Raju Bera

1,0189 silver badges14 bronze badges

Collectives™ on Stack Overflow

Add class with jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related