Question

我有这样的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; 
}

在c＃后面使用javascript，jquery或asp.net代码我想操纵background-color属性。

我怎么能这样做，你推荐我的解决方案的优点和缺点是我想知道的。

Answer 1

在jQuery中你可以简单地使用

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

如果您通过c＃代码执行此操作，则页面将刷新。

您无法通过javascript将属性更改应用于:hover，而应使用jquery.hover功能。

Answer 2

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

我知道它不是你要求的javascript，但如果你正在寻找简单的效果，这会更容易。

Answer 3

这就是我所做的。它在css中设置初始值。然后我有jquery更改了div上的hover。

第一个函数是光标进入时，第二个函数是光标退出时。

Demo

Answer 4

任何具有:hover, :active等的类都不能轻易地从javascript或jquery中操作。建议的替代方法是删除:hover css函数和我们jquery.hover函数。

jquery.hover：

$(".classOrID").hover(

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

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

    }
);

您可能会注意到<%= primaryColor %>这只是从代码中获取c＃中的值，然后从我的cms中的颜色选择器中选择它。

对于任何只需要css更改而不需要的东西：我会这样做。

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

或者Shoban推荐没有jquery的javascript解决方案。

动态更改css

4 个答案: