更改CSS動態

我已經CSS像這樣：更改CSS動態

.myTabs .JustForFun .ajax__tab_inner:hover 
{ 
    width: 109px; 
    background: url ("/images/csc_tr.png") no-repeat 100% 0%; margin-right: 2px; 
    background-color: #BBC614; 
}

使用JavaScript，jQuery的還是落後的C＃代碼asp.net我想操縱background-color屬性。

我該怎麼做，你推薦的解決方案的優缺點是什麼，我想知道。

來源

2012-01-26 Anicho

您是否希望在每次懸停時動態設置，或者您是否嘗試在頁面加載時設置該值？ – kwelch

你有沒有考慮過使用css3？雖然它不能與舊版瀏覽器兼容，但它會通過顏色更改爲您提供良好的轉場。 – JackalopeZero

@kwelch頁面加載:)或dom對象準備好 – Anicho

這是我做的。它在css中設置初始值。然後，我有jquery，更改在hover。

第一個函數是光標進入時，第二個函數是光標退出。

Demo

來源

2012-01-26 17:41:35 kwelch

我會接受你的回答我寫的基本上是一樣的東西哈哈感謝哥們！ – Anicho

在jQuery中，你可以簡單地使用

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".myTabs").css("background-color","your color"); 
    }); 
</script>

如果通過C＃代碼做到這一點後，頁面會刷新。

您不能通過javascript將屬性更改應用於:hover，而應使用jquery.hover函數。

來源

2012-01-26 16:32:36 Shoban

所以我只是''（「。myTabs .JustForFun .ajax__tab_inner：hover」）.css（「background-color」，「your color」）;' – Anicho

你的解決方案不起作用。 – Anicho

Here it is using css3（改編自w3schools tutorial）。

我知道它不是你想要的JavaScript，但是如果你正在尋找簡單的效果，這會容易得多。

來源

2012-01-26 16:42:22 JackalopeZero

感謝Jackalope轉換參數非常棒！ – Anicho

與:hover, :active等等的任何類不能從JavaScript或jquery的足夠容易地操縱。建議的替代方法是刪除:hover css函數和我們jquery.hover函數。

jquery.hover：

$(".classOrID").hover(

    function() { 
     $(this).css("YourAttribute", <%= primaryColor %>); 
    } , 

    function() { 
     $(this).css("YourAttribute", <%= secondaryColor %>); 

    } 
);

您可能會注意到<%= primaryColor %>這只是會從後面的代碼來自於我的CMS顏色選擇器撿起來，在C＃中的價值。

對於任何只是一個CSS變化不需要：懸停我會這樣做。

$('.classOrID').css('background-color', <%= primaryColor %>);

或者什麼shoban推薦的JavaScript解決方案沒有jQuery的。

來源

2012-01-26 17:49:38 Anicho

回答

相關問題