/    Sign up×
Community /Pin to ProfileBookmark

Javascript and CSS

Copy linkTweet thisAlerts:
Aug 08.2005

Ok quick question about css and javascript.
I have the following css for a tab:

[code]a.tab {
border-style: solid solid none solid;
border-color: <? echo “$tc_css[tabborder]”; ?>;
border-width: 2px 2px 0px 2px;
background-color: <? echo “$tc_css[tabbgcolor]”; ?>;
padding: 2px 0.5em 2px 0.5em;
margin-top: 4px;
}
a.tab:hover {
border-color: <? echo “$tc_css[tabborderhover]”; ?>;
background-color: <? echo “$tc_css[tabbgcolorhover]”; ?>;
text-decoration: bold;
}[/code]

Now I have noticed when i change the style in javascript style.backgroundColor or style.borderColor that it removes the hover style.

[code]function changetablecolor() {
var thecolor = document.thisform.color2.value;
document.getElementById(“thistable”).style.backgroundColor = thecolor;
}[/code]

With that.

Is there a way i can prevent that?
Also is there a way to change the the hover as well?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@MongusAug 08.2005 — I don't think there's any way to change the hover pseudo-class.

Instead of changing the style you could have a completely different class with its own hover pseudo-class. Then you just switch the class via JavaScript for the effect you want.
Copy linkTweet thisAlerts:
@immortal20authorAug 08.2005 — Well what i have going is a text box with a color picker, user can either enter hex or pick a color from the color picker, and with the javascript it allows them to preview it the instant they change it.

I have backgroundcolor and bordercolor working perfectly, but it changes the hover style.

I wanted to have it to where they can change the backgroundcolor, bordercolor, hover backgroundcolor, and hover bordercolor.

But i geuss the hover part isn't possible.

Exactly what do you mean switching classes? Not familiar with that can you give me an example?
Copy linkTweet thisAlerts:
@MongusAug 08.2005 — Switching classes just involves changing the className for an element. That won't work in your case.

This should be closer to what you want (untested):
<i>
</i>&lt;script type="text/javascript"&gt;
function changeStyle(selector, style)
{
var s = document.styleSheets[document.styleSheets.length - 1];

<i> </i>if (s.cssRules) // DOM2
<i> </i> s.insertRule(selector + " {" + style + "}", s.cssRules.length);
<i> </i>else if (s.rules) // IE 4+
<i> </i> s.addRule(selector, style);
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@MongusAug 08.2005 — Oops, shouldn't have var in function parameter definitions. ?

This one's tested in Firefox:
<i>
</i>html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
#test { background: #ccc; }
#test:hover { background: #f99; }
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function changeStyle(selector, style)
{
var s = document.styleSheets[document.styleSheets.length - 1];

<i> </i>if (s.cssRules) // DOM2
<i> </i> s.insertRule(selector + " {" + style + "}", s.cssRules.length);
<i> </i>else if (s.rules) // IE 4+
<i> </i> s.addRule(selector, style);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="test"&gt;Test Div&lt;/div&gt;
&lt;input type="button" onclick="changeStyle('#test:hover', 'background: #f9f')" value="Purple" /&gt;
&lt;input type="button" onclick="changeStyle('#test:hover', 'background: #9ff')" value="Cyan" /&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@MongusAug 08.2005 — Works in IE 6 too if you change the div to a link - IE 6 doesn't support the hover pseudo-class for anything other than links.
Copy linkTweet thisAlerts:
@immortal20authorAug 09.2005 — Thanks everyone, just one more question.

Since the user will be choosing a color from a color picker which i have it focus back on a input box and the color chosen from the color picker is put in the input box in hex (#blabla), I am using your changestyle function above, I have it set to onFocus="changeStyle('a.tab', 'background-color: this.value')"

I don't think the this.value is working.

Anyway to send the value of the input box to the style variable (background-color: usersselection) or whatever?

Turning out great so far though appreciate it.
Copy linkTweet thisAlerts:
@immortal20authorAug 09.2005 — Oh nevermind, I replaced it with this:

onFocus="changeStyle('a.tab', 'background-color:'+this.value+'')"

Works great
×

Success!

Help @immortal20 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...