jQuery 悬停和类选择器
Posted
技术标签:
【中文标题】jQuery 悬停和类选择器【英文标题】：jQuery hover and class selector 【发布时间】：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 是否已加载。
【问题讨论】：
【参考方案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() 来完成它
【讨论】：
以上是关于jQuery 悬停和类选择器的主要内容，如果未能解决你的问题，请参考以下文章