jQuery 悬停和类选择器答案

【问题标题】：jQuery hover and class selectorjQuery 悬停和类选择器
【发布时间】：2010-09-21 12:17:32
【问题描述】：

我不想使用以下 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 是否已加载。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你的代码在我看来不错。

使用 jQuery 的 $(callback) 函数确保 DOM 在执行 javascript 之前准备就绪：

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

【讨论】：

正如这个答案中提到的，我认为你所缺少的只是时间。
是的，我只是忘记在 DOM 完成加载后运行代码。

【解决方案2】：

我建议不要将 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;
}

【讨论】：

【解决方案3】：

这可以在 CSS 中使用 :hover 伪类来实现。 (:hover 不适用于 IE6 中的<div>s)

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

【讨论】：

【解决方案4】：

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 更好？

【解决方案6】：

顺便说一句，这更有效：

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

【讨论】：

【解决方案7】：

我更喜欢 foxy 的回答，因为在为工作创建现有 css 属性时，我们不应该使用 javascript。

不要忘记在.menuItem 中添加display: block ;，这样高度和宽度都要考虑在内。

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

【讨论】：

我同意文森特的观点。文森特在家里！
如果您只是更改背景颜色，则无需更改类 - 更改类会导致浏览器必须重新计算元素的位置。
关于重新定位计算的有趣评论，我下次再考虑。

【解决方案8】：

如果有人阅读原始问题的意思是他们想要动态更改悬停 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;
    }

}

【讨论】：

【解决方案9】：

我刚刚在 jQuery 中编写了一个示例，说明如何在单选按钮上创建 div 覆盖，从而为 jQuery 创建一个紧凑、交互式但简单的颜色选择器插件

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

【讨论】：

【解决方案10】：

通过创建一个类来让事情变得简单

.bcolor{ 背景：#F00; }

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

【讨论】：