79

I need to define a div's background color on :hover with jQuery, but the following doesn't seem to work: 

$(".myclass:hover div").css("background-color","red");

How can I get the same result? It's important that it has to be done with jQuery but for some reason it doesn't work. Any suggestions? Thanks!

ErikTailor
  • 875
  • 1
  • 8
  • 11
  • 1
    Try this http://stackoverflow.com/questions/5986464/change-div-background-on-rollover-with-jquery – Gjohn Jan 10 '14 at 18:14
  • 2
    jQuery selects elements; it doesn't define CSS rules. Even had that been possible, it wouldn't do what you want. – SLaks Jan 10 '14 at 18:16
  • Pseudo-selectors are not technically part of the DOM and therefore cannot be manipulated using JavaScript. – Blazemonger Jan 10 '14 at 18:16
  • 1
    Define a CSS rule to do this. If you _really_ have to, you can insert a ` – Matt Ball Jan 10 '14 at 18:18
  • Ok wait a moment, i create a fiddle to show the exact problem and why it can't be done via css – ErikTailor Jan 10 '14 at 18:20
  • `$(".myclass:hover div { background-color: red }");` \o/ – Apolo Aug 06 '15 at 17:45
  • @elclanrs there are cases when you are 'hacking' CSS with jQuery. Also its important to note that jQuery generated CSS is inline which is in most cases goes over CSS from external file. – Kunok Apr 15 '16 at 17:32
  • @elclanrs for example rn i have an animation in jquery over a div. When i hover the div i want the color to change BUT when animated, wheither it is hovered or not it need to be an other color. But doing that in js means that when the animation is done my hover color don't work anymore, so I was looking for a way to make the 'complete' state of the animation ':hover{'color', 'the color'}'. – Salix May 23 '17 at 16:03

6 Answers6

95

I would suggest to use CSS over jquery ( if possible) otherwise you can use something like this

$("div.myclass").hover(function() {
  $(this).css("background-color","red")
});

You can change your selector as per your need.

As commented by @A.Wolff, If you want to use this hover effect to multiple classes, you can use it like this

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})

Js Fiddle Demo

Sachin
  • 40,216
  • 7
  • 90
  • 102
  • That can be done, but my problem is i have a lot of selectors... For example, my code looks like this: $(".logo, .logo-main, .logo-main:hover em, .another, .another:hover div").css("background","red"); That's why I'd like to avoid this method.. – ErikTailor Jan 10 '14 at 18:16
  • 3
    I guess you mean: `$(".myclass").hover(function(e) { $(this).find('div').css("background-color",e.type === "mouseenter"?"red":"transparent") });` – A. Wolff Jan 10 '14 at 18:19
  • This answer is correct for this question. You change the select per your needs. – JerryHuang.me Jan 10 '14 at 18:20
  • 1
    @George look at your selectors, you want red background for normal class as well as on their `:hover` state. So why not simply give them `background:red` – Sachin Jan 10 '14 at 18:23
  • @Sachin i don't understand what you mean here: "look at your selectors, you want red background for normal class as well as on their :hover state" ? – A. Wolff Jan 10 '14 at 18:28
  • @A.Wolff I am talking about these `$(".logo, .logo-main, .logo-main:hover em, .another, .another:hover div")`, So he wants `background:red` for `.another` as well as `.another:hover` – Sachin Jan 10 '14 at 18:33
  • @Sachin ha ok, i didn't saw OP's comment ;) – A. Wolff Jan 10 '14 at 18:34
  • @JeffShaver this can make sense to do in javascript eg I need to make a decision whether to have a hover highlight based on some data sent down – PandaWood Feb 22 '16 at 01:36
  • this differs from a standard css :hover definition in that it makes the hovered elements keep the new styling even after they are no longer hovered – Charon ME Feb 10 '23 at 08:56
31

You can try this:

$(".myclass").mouseover(function() {
    $(this).find(" > div").css("background-color","red");
}).mouseout(function() {
    $(this).find(" > div").css("background-color","transparent");
});

DEMO

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
21

I know this has an accepted answer but if anyone comes upon this, my solution may help.

I found this question because I have a use-case where I wanted to turn off the :hover state for elements individually. Since there is no way to do this in the DOM, another good way to do it is to define a class in CSS that overrides the hover state.

For instance, the css:

.nohover:hover {
    color: black !important;
}

Then with jQuery:

$("#elm").addClass("nohover");

With this method, you can override as many DOM elements as you would like without binding tons of onHover events.

funkju
  • 3,463
  • 2
  • 15
  • 19
15

Well, you can't add styling using pseudo selectors like :hover, :after, :nth-child, or anything like that using jQuery.

If you want to add a CSS rule like that you have to create a <style> element and add that :hover rule to it just like you would in CSS. Then you would have to add that <style> element to the page.

Using the .hover function seems to be more appropriate if you can't just add the css to a stylesheet, but if you insist you can do:

$('head').append('<style>.myclass:hover div {background-color : red;}</style>')

If you want to read more on adding CSS with javascript you can check out one of David Walsh's Blog posts.

tanguy_k
  • 11,307
  • 6
  • 54
  • 58
arjabbar
  • 6,044
  • 4
  • 30
  • 46
7

Use JQuery Hover to add/remove class or style on Hover: 

$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);
GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
2

It's too late, however the best example, how to add pseudo element in jQuery style

 $(document).ready(function(){
 $("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
 $("a.dummy").hover(function() {
            $(this).css("background-color","#0670c9")
          }).mouseout(function(){
              $(this).css({"background-color":"#003d79",});
          });
 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>
veera
  • 31
  • 1
  • 4