/    Sign up×
Community /Pin to ProfileBookmark

Javascript disabling CSS hover

Copy linkTweet thisAlerts:
Oct 07.2005

Hey,
[B]Please just read post number 8[/B]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterOct 07.2005 — Probably because you are over-writting the class name. Got code?
Copy linkTweet thisAlerts:
@sftrprodauthorOct 07.2005 — Ok,

Here is the code which changes the colour of the A tags when I click them:
[CODE] <script>
function gotousermenu() {
document.getElementById('menutab').style.backgroundColor="#7db7ff";
document.getElementById('usertab').style.backgroundColor="#5591db";
document.getElementById('mainmenu').style.display="none";
document.getElementById('usermenu').style.display="block";
}
function gotomainmenu() {
document.getElementById('menutab').style.backgroundColor="#5591db";
document.getElementById('usertab').style.backgroundColor="#7db7ff";
document.getElementById('mainmenu').style.display="block";
document.getElementById('usermenu').style.display="none";
}
</script>[/CODE]
That is the code that stops the following CSS from working:
[CODE]a.hormenuitem {
padding: 4px;
background-color: #7db7ff;
border-top: solid 1px #5591db;
border-right: solid 1px #5591db;
}
a.hormenuitem:hover {
background-color: #9dc9ff;
}[/CODE]
That help?
Copy linkTweet thisAlerts:
@UltimaterOct 07.2005 — The fix should be easy as this:
<i>
</i>a.hormenuitem:hover {
background-color: [color=royalblue]!important[/color] #9dc9ff;
}
Copy linkTweet thisAlerts:
@sftrprodauthorOct 07.2005 — Nah sorry that didnt work
Copy linkTweet thisAlerts:
@UltimaterOct 07.2005 — This works in Firefox but not too many others:
<i>
</i>&lt;style type="text/css" id="sheet1"&gt;
a.link1 {
padding: 4px;
background-color: #7db7ff;
border-top: solid 1px #5591db;
border-right: solid 1px #5591db;
}
a.link1:hover {
background-color: #9dc9ff;
}

&lt;/style&gt;


&lt;script type="text/javascript"&gt;


function dosomething() {
document.getElementById("sheet1").sheet.insertRule('a.link1 { padding: 4px; background-color: green; border-top: solid 1px #5591db; border-right: solid 1px #5591db;}',document.getElementById("sheet1").sheet.cssRules.length)
document.getElementById("sheet1").sheet.insertRule('a.link1:hover { background-color: !important #9dc9ff;}',document.getElementById("sheet1").sheet.cssRules.length)
}


&lt;/script&gt;
&lt;a id="l1" href="javascript:dosomething()" class="link1"&gt;link&lt;/a&gt;


Hmm... Need some sort of cross-browser insertRule method... Sounds like work for me to do in the future.

It would be best just to swap classNames instead.
Copy linkTweet thisAlerts:
@UltimaterOct 07.2005 — Here's an example using a className swap:
<i>
</i>&lt;style type="text/css"&gt;
a.link1 {
padding: 4px;
background-color: #7db7ff;
border-top: solid 1px #5591db;
border-right: solid 1px #5591db;
}
a.link1:hover {
background-color: #9dc9ff;
}

a.link1c {
padding: 4px;
background-color: #7db7ff;
border-top: solid 1px #5591db;
border-right: solid 1px #5591db;
}
a.link1c:hover {
background-color: green;
}
&lt;/style&gt;


&lt;script type="text/javascript"&gt;


function dosomething() {
var e=document.getElementById("l1");
e.className="link1c"
}


&lt;/script&gt;
&lt;a id="l1" href="javascript:dosomething()" class="link1"&gt;link&lt;/a&gt;
Copy linkTweet thisAlerts:
@sftrprodauthorOct 08.2005 — [B]I have now changed some of my code so it is slightly different, but I changed it because it got rid of some problems from before. So here is all the code reposted. Sorry for that.[/B]

Maybe I should have given you a little bit more of my code.

Here is what my menu looks like:

[URL=http://www.sixfoottallrabbit.co.uk/tagsandstuff.JPG]Click Here[/URL]

This is displayed with the following HTML:
[code=html] <a id="menutab" class="hormenuitemsel" onClick="gotomainmenu();">Menu</a><a id="usertab" class="hormenuitem" onClick="gotousermenu();">User</a><br />
<div id="mainmenu" class="mainmenu">
<a class="menuitem">News</a>
<a class="menuitem">Products</a>
<a class="menuitem">WhirlWind Scores</a>
<a class="menuitem">Forum</a>
<a class="menuitem">Staff</a>
<a class="menuitem">Contact</a>
</div>
<div id="usermenu" class="usermenu">
You are not logged in.<br /><br />
Username: <input type="text" /><br />
Password: <input type="text" /><br />
<input type="submit" />
</div>[/code]
In that picture I just showed, you will notice that Contact menu button is hilighted. This is because the mouse is over it. I also want this to happen with the non selected tab. I used this CSS to do this:
[CODE]a.hormenuitem {
padding: 4px;
background-color: #7db7ff;
border-top: solid 1px #5591db;
border-right: solid 1px #5591db;
border-left: solid 1px #5591db;
}
a.hormenuitem:hover {
background-color: !important #9dc9ff;
}
a.hormenuitemsel {
padding: 4px;
background-color: #5591db;
border-right: solid 1px #5591db;
border-left: solid 1px #5591db;
border-top: solid 1px #5591db;
}[/CODE]
Ok, the hover would normally work, until I add this javascript to change the div under the menu and the class of the a tags:
[CODE] <script>
function gotousermenu() {
document.getElementById('menutab').className="hormenuitem";
document.getElementById('usertab').className="hormenuitemsel";
document.getElementById('mainmenu').style.display="none";
document.getElementById('usermenu').style.display="block";
}
function gotomainmenu() {
document.getElementById('menutab').className="hormenuitemsel";
document.getElementById('usertab').className="hormenuitem";
document.getElementById('mainmenu').style.display="block";
document.getElementById('usermenu').style.display="none";
}
</script>[/CODE]
I know that is a lot to read. But do you know why this isn't working? If so, could you correct that code directly. Then I'll understand it ?

THank you very much
×

Success!

Help @sftrprod 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...