最近在使用jQuery的過程中,遇到了一個問題:邊框顯示不出來。經過查閱資料和思考,我成功解決了這個問題,下面我來和大家分享一下。
// CSS代碼如下 .box { width: 100px; height: 100px; background-color: #ccc; border: 1px solid red; } // jQuery代碼如下 $(document).ready(function(){ $(".box").hover(function(){ $(this).css("border", "1px solid green"); }, function(){ $(this).css("border", "1px solid red"); }); });
上述代碼中,我定義了一個名為“box”的div元素,這個元素有一個1px的紅色邊框。然后我使用jQuery,使得當鼠標移入此元素時,邊框顏色變為綠色,當鼠標移出時,邊框顏色變回紅色。但是實際運行時,我卻發現鼠標移入時邊框并沒有變成綠色。經過仔細檢查,我發現問題出在CSS的樣式表定義上。
在CSS中,我為“box”元素定義了一個1px的紅色邊框,但是我沒有給它指定邊框的樣式,因此缺省的樣式是groove。而在jQuery代碼中,我設置邊框顏色為綠色,這個顏色只有在邊框樣式是solid的情況下才有效果。因此,解決方法就是將CSS代碼中的border-style設置為solid:
.box { width: 100px; height: 100px; background-color: #ccc; border: 1px solid red; border-style: solid; // 添加這句代碼即可 }
重新運行代碼,問題順利解決了。這個問題的教訓是:在使用jQuery進行邊框顏色的修改時,一定要注意邊框樣式的設置。
上一篇css循環旋轉