gpt4 book ai didi

javascript - jquery 悬停类更改无法正常工作

转载 作者:行者123 更新时间:2023-11-30 08:33:49 25 4
gpt4 key购买 nike

<html>
<style>
.highlight{
background-color: pink;
}
.over{
background-color: red;
}
.odd{
background-color: lightgrey;
}
.even{
background-color: gray;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.c').addClass('highlight');
$('.a').addClass('odd');
$('.b').addClass('even');
});
</script>
</head>
<body>
<h2>2: Zebra Striping Demo</h2>

<table width="200" border="1">
<caption><a href="#">UP</a> Zebra Striping Demo <a href="#">DN</a></caption>
<tr class = "a"><td>January</td> <td>February</td><td>March</td></tr>
<tr class = "b"><td>April</td><td>May</td><td>June</td></tr>
<tr class = "c"><td>July</td><td>August</td><td>September</td></tr>
<tr class = "a"><td>October</td><td>November</td><td>December</td</tr>
<tr class = "b"><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>
<tr class = "a"><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
<tr class = "b"><td>Spring</td><td>Summer</td><td>Fall</td></tr>
</table>
</body>
<script>
$("tr").hover(function(){
$(this).addClass("over");
}, function() {
$(this).removeClass("over");
});
</script>
</html>

我在这段代码中尝试做的是在悬停时将颜色更改为 .over css 类。所以基本上,使用悬停功能,它不会改变所有行的颜色。悬停时仅更改 c 类行。有关如何解决此问题的建议?

最佳答案

这是因为您的 CSS 应用的顺序

首先,任何带有 .highlight 的 tr 都会获得背景颜色(粉红色)。然后任何 .over 的 tr 都会得到它的背景颜色(替换 .highlight)等等。请注意,.even.odd 在最后。

您的两个选择是重新排序您的 CSS 声明(如@j08691 的回答)或使 .over 的样式成为 !important

    .over{
background-color: red !important;
}

关于javascript - jquery 悬停类更改无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34096205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com