Changing css dynamically

Question

I have css like so:

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

Using javascript, jquery or asp.net code behind c# I would like to manipulate background-color attribute.

How can I do this, what are the pros and cons of the solution you've recommended me is what I would like to know.

Are you looking to set that dynamically on each hover, or are you trying to set that value on page load? — kwelch
– kwelch, Commented Jan 26, 2012 at 16:34
Have you considered using css3? It will give you nice transitions through the color change although it would not be compatible with older browsers. — RonnyKnoxville
– RonnyKnoxville, Commented Jan 26, 2012 at 16:34
@JackalopeZero I have considered css3 since it supports variables I am restricted by supporting older browsers for our client base, thats changing so maybe in the future will be cool. — Anicho
– Anicho, Commented Jan 26, 2012 at 16:37

Anicho · Accepted Answer · 2012-01-27 12:33:04Z

4

In jQuery you can simply use

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

If you do it via c# code then the page will refresh.

You cannot apply attribute changes to :hover through javascript instead you should use jquery.hover function.

edited Jan 27, 2012 at 12:33

Anicho

2,66711 gold badges49 silver badges76 bronze badges

answered Jan 26, 2012 at 16:32

Shoban

23k8 gold badges67 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anicho Over a year ago

So I just do $(".myTabs .JustForFun .ajax__tab_inner:hover").css("background-color","your color");

RonnyKnoxville · Accepted Answer · 2012-01-26 16:42:22Z

2

Here it is using css3 (adapted from a w3schools tutorial).

I know its not javascript like you asked for, but this is much easier if you are looking for simple effects.

answered Jan 26, 2012 at 16:42

RonnyKnoxville

6,43410 gold badges50 silver badges80 bronze badges

1 Comment

Anicho Over a year ago

thanks for the Jackalope the transition parameters are awesome!

kwelch · Accepted Answer · 2012-01-26 17:41:35Z

1

Here is what I did. It sets the initial value in the css. Then I have the jquery that changes the div on hover.

The first function in the is when the cursor enters and the second is when the cursor exits.

Demo

answered Jan 26, 2012 at 17:41

kwelch

2,48923 silver badges23 bronze badges

1 Comment

Anicho Over a year ago

I will accept you answer I was writing up essentially the same thing haha thanks buddy!

Anicho · Accepted Answer · 2012-01-26 17:49:38Z

any classes with :hover, :active etc cannot be manipulated from javascript or jquery easily enough. The recommended alternative is to drop the :hover css function and us jquery.hover function instead.

jquery.hover:

$(".classOrID").hover(

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

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

    }
);

You may notice the <%= primaryColor %> this just gets the value in c# from code behind which picks it up from a color picker in my cms.

For anything with just a css change not requiring :hover I would do.

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

Or what Shoban recommended javascript solution without jquery.

Collectives™ on Stack Overflow

Changing css dynamically

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related