Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

css style not changing. why?

Posted on 2014-04-01
1
Medium Priority
?
403 Views
Last Modified: 2014-04-21
Hi;

I have the following css.

.aui-header .aui-nav .aui-buttons .aui-button-primary,
.aui-header .aui-nav .aui-buttons .aui-button-primary:link,
.aui-header .aui-nav .aui-buttons .aui-button-primary:visited {
    background: #336ea9;
    background-image: -moz-linear-gradient(top, #3b7fc4, #336ea9);
    background-image: -ms-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: -webkit-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: -o-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: linear-gradient(top,  #3b7fc4, #336ea9);
    height: 28px;
    border: 0;
    box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(0, 0, 0, 0.2) 0 1px 1px 0;
    color: #fff;    
    text-shadow: 0 1px 0 #295989;
}

Open in new window


and following jquery

$('.aui-buttons').css({ 'background-color': '#FF6633', 'background-image': '-webkit-gradient(linear, left top, left bottom, from(#FF6633), to(#FF6633))',
'background-image': '-webkit-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-moz-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-ms-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-o-linear-gradient(top, #4ba614, #FF6633)',
'background-image': 'linear-gradient(to bottom, #FF6633, #FF6633)',
'background-color': '#FF6633',
'background': '#FF6633'
});

Open in new window


and background doesn't become from:
'background': '#336ea9'
to:
'background': '#FF6633'

Why?

Regards.
0
Comment
Question by:jazzIIIlove
1 Comment
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39969719
It's because your CSS is styling the .aui-button-primary element and your jQuery is applying the style to it's parent (.aui-buttons). You need to apply the jQuery CSS to the same child:

$('.aui-buttons .aui-button-primary').css({
   ...
}

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question