Jquery 类在样式标记中的位置不同对页面的影响是什么？
我不是很擅长使用CSS，所以在这里发布这篇文章来获取一些信息 请参阅下面的代码，我在哪里显示一个表，每当鼠标在一行上移动时，该行就会突出显示。使用下面的代码，我只得到了偶数行的高亮显示。但是，如果将类“highlight”移动到类“stripe2”下面，那么一旦鼠标在其上移动，所有行都将高亮显示。有人能解释一下为什么类定义的位置会影响显示吗Jquery 类在样式标记中的位置不同对页面的影响是什么？,jquery,html,css,Jquery,Html,Css,我不是很擅长使用CSS，所以在这里发布这篇文章来获取一些信息 请参阅下面的代码，我在哪里显示一个表，每当鼠标在一行上移动时，该行就会突出显示。使用下面的代码，我只得到了偶数行的高亮显示。但是，如果将类“highlight”移动到类“stripe2”下面，那么一旦鼠标在其上移动，所有行都将高亮显示。有人能解释一下为什么类定义的位置会影响显示吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Striping/Hover Highlighting a Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#theList tr:even").addClass("stripe1");
$("#theList tr:odd").addClass("stripe2");
$("#theList tr").hover(
function () {
$(this).toggleClass("highlight");
},
function () {
$(this).toggleClass("highlight");
}
);
});
</script>
<style type="text/css">
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
.stripe2 {
background-color:#afa;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id="theList">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>
条带化/悬停突出显示表格
$（函数（）{
$（“#theList tr:even”）.addClass（“stripe1”）；
$（“#theList tr:odd”）.addClass（“stripe2”）；
$（“#列表tr”）。悬停(
函数（）{
$（this.toggleClass（“突出显示”）；
},
函数（）{
$（this.toggleClass（“突出显示”）；
}
);
});
th，td{
字体系列：Verdana、Arial、Helvetica、无衬线；
字号：18px；
颜色：#000000；
}
tr{
边框：1px纯色灰色；
}
运输署{
宽度：200px；
填充：3倍；
}
th{
背景色：#D2E0E8；
颜色：#003366
}
桌子{
边框：1pt纯色灰色；
}
.可点击{
光标：指针；
}
.stripe1{
背景色：#0f0；
}
.亮点{
背景色：#ffcc00；
字体大小：粗体；
}
.条纹2{
背景色：#afa；
}
使用jQuery对表进行条带化和悬停高亮显示
项目
价格
牛奶
1.99
鸡蛋
2.29
黄油
3.49
面包
0.99
意大利面食
1.19
霍尼
4.39
曲奇饼
2.99
苹果
0.59
糖
1.78
胡椒粉
1.56
.highlight.stripe2tr。突出显示tr.highlight