CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pim Jager
Pim Jager

Reputation: 32129

jQuery hover and class selector

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.

Upvotes: 26

Views: 121564

Answers (10)

Justin Lucente
Justin Lucente

Reputation: 1171

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;
}

Upvotes: 5

Greg
Greg

Reputation: 11

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;
    }

}

Upvotes: 1

Vincent Robert
Vincent Robert

Reputation: 36150

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;
}

Upvotes: 29

Joberror
Joberror

Reputation: 5890

Always keep things easy and simple by creating a class

.bcolor{ background:#F00; }

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

Upvotes: 0

Reputation:

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/

Upvotes: 0

Sugendran
Sugendran

Reputation: 2109

On a side note this is more efficient:

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

Upvotes: 2

vincent
vincent

Reputation: 6618

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")

Upvotes: 1

okoman
okoman

Reputation: 5667

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 :-)

Upvotes: 5

foxy
foxy

Reputation: 2168

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;
}

Upvotes: 9

foxy
foxy

Reputation: 2168

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');
   });
});

Upvotes: 54

Related Questions