logo标签列表

jQuery悬停和类选择器

javascriptjqueryhtmlcss
26

我想使用以下HTML、CSS和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');
});

编辑：我忘记说我有理由不想使用CSS的方式。

而且我确实忘记检查DOM是否已加载。

10个回答
54

你的代码看起来不错。

使用jQuery的$(callback)函数确保DOM在你的JavaScript执行之前已经准备好：

$(function() {
   $('.menuItem').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });
});
正如这个答案中所提到的，我认为你所缺少的只是时间。 - Timothy Khouri
是的，我只是忘记在DOM加载完成后运行代码了。 - Pim Jager
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;
}
9
可以使用CSS中的:hover伪类来实现此功能。 (:hover在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;
}
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');

    });

});

工作正常 :-)

5

既然这是一个菜单，那么我们可以将其提升到下一个级别，通过使用列表元素来清理HTML并使其更具语义性：

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;
}
只是好奇...当我做菜单系统时，总是遇到UL/LI的东西。但是使用这种方法时，我必须“取消格式化”UL/LI的默认设置，然后使用自己的自定义CSS重新格式化它们。特别是在子菜单和子/子菜单中。当我像提问者一样使用div标签时，我只需要编写所需的CSS来格式化它们，仅此而已。从那以后，我一直想知道UL/LI与菜单有何关系，严格来说，菜单不是列表（更像导航）。但我并不是说你错了，只是想问为什么除了它是“规范”之外，UL/LI方法比div更好？ - Francis Rodgers
2

顺便提一下，这样更有效率：

$(".menuItem").hover(function(){
    this.style.backgroundColor = "#F00";
}, function() {
    this.style.backgroundColor = "#000";
});
1
如果有人认为原始问题是要动态更改悬停CSS而不仅仅是更改元素的基本CSS规则，我发现这个方法可行：
我有一个动态加载的页面，需要我找出数据加载后容器的高度。一旦加载完成，我想更改CSS的悬停效果，以便一个元素覆盖结果容器。我需要更改CSS .daymark:hover规则的高度。具体方法如下...
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;
    }

}
1

我更喜欢foxy的答案，因为当已有的CSS属性适用于工作时，我们不应该使用JavaScript。

别忘了在.menuItem中添加display: block ;，这样高度和宽度才会被考虑在内。

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

我同意Vincents的观点。Vincents在这里！ - Kent Fredric
如果你只是改变背景颜色，那么没有必要进行类别更改 - 更改类别会导致浏览器重新计算元素的位置。 - Sugendran
有关重新定位计算的有趣评论，下次我会考虑一下。 - vincent
0

通过创建一个类来保持事情简单易懂

.bcolor{ background:#F00; }

然后使用addClass()和removeClass()来完成它

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接