Add css property to elements :hover state

Question

Can I add css property to elements hover state.

I know how to add background to an element, what I need is to add background to an elements :hover state.

I have a <div class="myDiv"></div>

I can add css background $('.myDiv').css('background', 'red');

When using ('.myDiv').hover((function(e) { $(this).css('background', 'red'); the background changes on hover, but it stays this way even when not hovering over element.

Any ideas?

Is there a reason you're looking to do this with javascript? Is there an unknown factor stopping you from using css's :hover selector? — jbutler483
– jbutler483, Commented Apr 10, 2015 at 9:23
Generally, applying styles using JavaScript is a bad practise. Please do use CSS’ :hover selector or add/remove classes. — Tim S.
– Tim S., Commented Apr 10, 2015 at 9:24
Yes there is a reason, as I am generating background with js. — sniurs
– sniurs, Commented Apr 10, 2015 at 10:45

Sudharsan S · Accepted Answer · 2015-04-10 09:14:15Z

7

.hover() method binds handlers for both mouseenter and mouseleave events.You can use it to simply apply behavior to an element during the time the mouse is within the element.

$('.myDiv').hover(function(e) { $(this).css('background', 'red'); },
                 function() { $(this).css('background', 'none'); } );

Fiddle

edited Apr 10, 2015 at 9:14

answered Apr 10, 2015 at 9:03

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

1 Comment

sniurs Over a year ago

hm, that's probably something with my code..though .mouseenter and .mouseleave works just fine..

Pranav C Balan · Accepted Answer · 2015-04-10 09:06:07Z

1

You can implement it using css no need for any script,

.myDiv:hover {
  background: red;
}

<div class="myDiv">Hello</div>

answered Apr 10, 2015 at 9:06

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Comments

jokarl · Accepted Answer · 2015-04-10 09:06:10Z

0

Try using the mouseenter and mouseleave events instead. Or write your current code like this:

('.myDiv').hover((function(e) { $(this).toggleClass('redBackground') });

Here you have to define the css class 'redBackground'.

answered Apr 10, 2015 at 9:06

jokarl

2,3244 gold badges35 silver badges81 bronze badges

Comments

Iqbal Kabir · Accepted Answer · 2015-04-10 09:06:28Z

0

hover function comprises two state. hover state and hover out state.

$('.myDiv').hover(
    function() {
        $(this).css('background', 'red');
    }, function() {
        $(this).css('background', 'white')
    }
);

For more info check this link.

answered Apr 10, 2015 at 9:06

Iqbal Kabir

1,62011 silver badges18 bronze badges

Comments

stanze · Accepted Answer · 2015-04-10 09:11:12Z

0

Even you can use jQuery mouseenter and mouseleave events. Working Demo

$( ".myDiv" ).mouseenter(function() {
  $( this ).css("background","red");  
});
$( ".myDiv" ).mouseleave(function() {
  $( this ).css("background","none");  
});

answered Apr 10, 2015 at 9:11

stanze

2,47814 silver badges14 bronze badges

2 Comments

jbutler483 Over a year ago

could you please explain how this adds any value against any of the previous answers?

sniurs Over a year ago

This seem to work, while having .hover with two functions inside won't work in my case (not sure why) but would probably be a better solution.

Waqas Khan · Accepted Answer · 2015-04-10 10:15:20Z

0

Simply use css.No need any jquery.

.myDiv:hover { 
    background-color: #FF0000;
}

answered Apr 10, 2015 at 10:15

Waqas Khan

2572 gold badges3 silver badges16 bronze badges

Collectives™ on Stack Overflow

Add css property to elements :hover state

6 Answers 6

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related