jQuery的懸停類更改無法正常工作
[英]jquery hover class change not working properly
問題描述
<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類行。 請教如何解決這個問題？
2 個解決方案
解決方案1
3 2015-12-04 19:47:26
這是由於CSS的應用順序 。
首先，任何帶有.highlight tr .highlight獲得背景色（粉紅色）。 那么任何TR是.over得到它的背景色（更換.highlight ）等。 需要注意的是.even和.odd最后是。
你兩個選擇，其一是重新排序的CSS聲明（如@ j08691的答案），或作.over的風格是!important
.over{
background-color: red !important;
}
解決方案2
2 已采納 2015-12-04 19:46:16
只需更改CSS規則的順序，即可使.over處於最后並具有優先級。
$(document).ready(function() { $('.c').addClass('highlight'); $('.a').addClass('odd'); $('.b').addClass('even'); }); $("tr").hover(function() { $(this).addClass("over"); }, function() { $(this).removeClass("over"); });
.highlight { background-color: pink; } .odd { background-color: lightgrey; } .even { background-color: gray; } .over { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <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>
懸停在jQuery中無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.