jQuery悬停和类选择器

时间:2008-11-09 13:00:20

标签: javascript jquery html css

我不想使用以下HTML,CSS和javascript动态更改div的背景颜色。 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');
});

编辑:我忘了说我有理由不想使用css方式。

我确实忘了检查DOM是否已加载。

10 个答案:

答案 0 :(得分:51)

您的代码对我来说很好。

使用jQuery的$(回调)函数确保在javascript执行之前DOM已准备就绪:

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

答案 1 :(得分:29)

我建议不要使用JavaScript进行这种简单的交互。 CSS能够做到这一点(即使在Internet Explorer 6中),它比使用JavaScript做得更响应。

您可以使用“:hover”CSS伪类,但为了使其适用于Internet Explorer 6,您必须在“a”元素上使用它。

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

答案 2 :(得分:9)

这可以使用:hover伪类在CSS中实现。 (:hover对IE6中的<div>不起作用)

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

答案 3 :(得分:5)

<强>的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');

    });

});

作品: - )

答案 4 :(得分:5)

由于这是一个菜单,不妨将它提升到一个新的水平,并清理HTML,并使用list元素使其更具语义性:

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

答案 5 :(得分:2)

另一方面,这更有效:

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

答案 6 :(得分:1)

我更喜欢foxy的答案,因为在为作业创建现有的css属性时,我们永远不应该使用javascript。

不要忘记在display: block ;中添加.menuItem,因此会考虑身高和宽度。

编辑:为了更好的脚本/外观和感觉脱钩,如果您需要通过jQuery更改样式我会定义一个额外的css类并使用$(...).addClass("myclass")$(...).removeClass("myclass")

答案 7 :(得分:1)

如果某人读取原始问题意味着他们想要动态更改悬停css而不只是更改元素的基本css规则,我发现这可以工作:

我有一个动态加载的页面,需要我找出加载数据后容器的高度。加载后,我想更改css的悬停效果,以便元素覆盖生成的容器。我需要更改css .daymark:悬停规则以获得新的高度。这就是......

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

}

答案 8 :(得分:0)

我刚刚在jQuery中编写了一个关于如何通过单选按钮创建div叠加的示例,以便为jQuery创建一个紧凑,交互但简单的颜色选择器插件

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

答案 9 :(得分:0)

通过创建一个类 .color {background:#F00; }

然后使用addClass()&amp; removeClass()完成它