jQuery hover and class selector

Question

I wan't to change the background color of a div dynamicly using the following HTML, CSS and javascript. HTML:

<div id="menu">
    <div class="menuItem"><a href=#>Bla</a></div>
    <div class="menuItem"><a href=#>Bla</a></div>
    <div class="menuItem"><a href=#>Bla</a></div>
</div>

CSS:

.menuItem{
  display:inline;
  height:30px;
  width:100px;
  background-color:#000;
}

Javascript:

$('.menuItem').hover( function(){
     $(this).css('background-color', '#F00');
},
function(){
     $(this).css('background-color', '#000');
});

EDIT: I forgot to say that I had reasons not to want to use the css way.

And I indeed forgot to check if the DOM was loaded.

foxy · Accepted Answer · 2008-11-09 13:27:24Z

54

Your code looks fine to me.

Make sure the DOM is ready before your javascript is executed by using jQuery's $(callback) function:

$(function() {
   $('.menuItem').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });
});

answered Nov 9, 2008 at 13:27

foxy

2,16815 silver badges12 bronze badges

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

2 Comments

Timothy Khouri Over a year ago

As mentioned in this answer, I think timing was all you were missing.

Pim Jager Over a year ago

Yep, I simply forgot to run the code after the DOM would have finished loading.

Community · Accepted Answer · 2012-04-03 17:34:49Z

29

I would suggest not to use JavaScript for this kind of simple interaction. CSS is capable of doing it (even in Internet Explorer 6) and it will be much more responsive than doing it with JavaScript.

You can use the ":hover" CSS pseudo-class but in order to make it work with Internet Explorer 6, you must use it on an "a" element.

.menuItem
{
    display: inline;
    background-color: #000;

    /* width and height should not work on inline elements */
    /* if this works, your browser is doing the rendering  */
    /* in quirks mode which will not be compatible with    */
    /* other browsers - but this will not work on touch mobile devices like android */

}
.menuItem a:hover 
{
    background-color:#F00;
}

edited Apr 3, 2012 at 17:34

CommunityBot

11 silver badge

answered Nov 9, 2008 at 13:57

Vincent Robert

36.2k15 gold badges84 silver badges122 bronze badges

Comments

foxy · Accepted Answer · 2008-11-09 13:35:17Z

9

This can be achieved in CSS using the :hover pseudo-class. (:hover doesn't work on <div>s in IE6)

HTML:

<div id="menu">
   <a class="menuItem" href=#>Bla</a>
   <a class="menuItem" href=#>Bla</a>
   <a class="menuItem" href=#>Bla</a>
</div>

CSS:

.menuItem{
  height:30px;
  width:100px;
  background-color:#000;
}
.menuItem:hover {
  background-color:#F00;
}

answered Nov 9, 2008 at 13:35

foxy

2,16815 silver badges12 bronze badges

Comments

okoman · Accepted Answer · 2008-11-09 13:52:30Z

test.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>jQuery Test</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <div id="menu">
            <div class="menuItem"><a href=#>Bla</a></div>
            <div class="menuItem"><a href=#>Bla</a></div>
            <div class="menuItem"><a href=#>Bla</a></div>
        </div>
    </body>
</html>

test.css

.menuItem
{

    display: inline;
    height: 30px;
    width: 100px;
    background-color: #000;

}

test.js

$( function(){

    $('.menuItem').hover( function(){

        $(this).css('background-color', '#F00');

    },
    function(){

        $(this).css('background-color', '#000');

    });

});

Works :-)

Victor Bjelkholm · Accepted Answer · 2012-09-28 21:26:42Z

5

Since this is a menu, might as well take it to the next level, and clean up the HTML, and make it more semantic by using a list element:

HTML:

  <ul id="menu">
    <li><a href="#">Bla</a></li>
    <li><a href="#">Bla</a></li>
    <li><a href="#">Bla</a></li>
  </ul>

CSS:

#menu {
  margin: 0;
}
#menu li {
  float: left;
  list-style: none;
  margin: 0;
}
#menu li a {
  display: block;
  line-height:30px;
  width:100px;
  background-color:#000;
}
#menu li a:hover {
  background-color:#F00;
}

edited Sep 28, 2012 at 21:26

Victor Bjelkholm

2,0169 gold badges29 silver badges54 bronze badges

answered Nov 9, 2008 at 15:37

Justin Lucente

1,1811 gold badge8 silver badges9 bronze badges

1 Comment

Francis Rodgers Over a year ago

Just curious...When I do menu systems. I always come across the UL/LI stuff. But when using this method, I had to "un-format" the default settings for UL/LI and then reformat them using my own custom css. Especially with sub & sub/sub menus. When I used div tags as the asker has done, I only needed to write the css I needed to format them, nothing more. Since then, I always wondered how UL/LI related to menus as strictly speaking, menus not lists (more like Navs). But I am not saying you are wrong, just asking why, apart from the fact that it is the "norm", UL/LI method is better than the div?

Sugendran · Accepted Answer · 2008-11-09 21:47:39Z

2

On a side note this is more efficient:

$(".menuItem").hover(function(){
    this.style.backgroundColor = "#F00";
}, function() {
    this.style.backgroundColor = "#000";
});

answered Nov 9, 2008 at 21:47

Sugendran

2,1091 gold badge14 silver badges15 bronze badges

Comments

vincent · Accepted Answer · 2008-11-09 14:16:47Z

1

I prefer foxy's answer because we should never use javascript when existing css properties are made for the job.

Don't forget to add display: block ; in .menuItem, so height and width are taken into account.

edit : for better script/look&feel decoupling, if you ever need to change style through jQuery I'd define an additional css class and use $(...).addClass("myclass") and $(...).removeClass("myclass")

edited Nov 9, 2008 at 14:16

answered Nov 9, 2008 at 14:10

vincent

6,6683 gold badges29 silver badges25 bronze badges

3 Comments

Kent Fredric Over a year ago

I agree with the vincents. Vincents's in the house !

Sugendran Over a year ago

If you're only changing the background colour then there is no need to do a class change - changing classes causes the browser to have to recalculate positioning of elements.

vincent Over a year ago

Interesting remark about repositioning calculation, I'll think about it next time.

Steven Lu · Accepted Answer · 2012-09-18 14:01:57Z

If someone reads the original question to mean that they want to dynamically change the hover css and not just change the base css rule for the element, I've found this to work:

I have a dynamically loaded page that requires me to find out how high the container becomes after data is loaded. Once loaded, I want to change the hover effect of the css so that an element covers the resulting container. I need to change the css .daymark:hover rule to have a new height. This is how...

function changeAttr(attrName,changeThis,toThis){
    var mysheet=document.styleSheets[1], targetrule;
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;

    for (i=0; i<myrules.length; i++){
        if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule
            targetrule=myrules[i];
            break;
        }
    }
    switch(changeThis)
    {
        case "height":
            targetrule.style.height=toThis+"px";
            break;
        case "width":
            targetrule.style.width=toThis+"px";
            break;
    }

}

score 0 · Accepted Answer · 2009-03-11 04:21:33Z

0

I just coded up an example in jQuery on how to create div overlays over radio buttons to create a compact, interactive but simple color selector plug-in for jQuery

http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/

answered Mar 11, 2009 at 4:21

Comments

Joberror · Accepted Answer · 2010-01-06 21:07:16Z

0

Always keep things easy and simple by creating a class

.bcolor{ background:#F00; }

THEN USE THE addClass() & removeClass() to finish it up

answered Jan 6, 2010 at 21:07

Joberror

5,8903 gold badges22 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery hover and class selector

10 Answers 10

2 Comments

Comments

Comments

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

Comments

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related