/    Sign up×
Community /Pin to ProfileBookmark

Styling Parent Hover/mouseover state

Copy linkTweet thisAlerts:
Aug 26.2010

Hi,
I am trying to style a parent element with a hover state style. I want to change the background colour when hovered over. I cant edit the html as this is generated automatically from a cms.

HTML example
<td>
<a>
<div id=timetablemenu>Timetable</div>
</a>
</td>

Javascript
var timetablemenuTag = document.getElementById(‘timetablemenu’);
timetablemenuTag.parentNode.parentNode.style.backgroundColor=’#FF0000′;

This works fine but i need to add a rollover background colour change.
I have tried timetablemenuTag.parentNode.parentNode.addClass=”timetable2″; and adding CSS but this doesnt seem to work.

Any ideas/suggestions would be much appriciated,

Thanks,
Tony

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@MGenevAug 26.2010 — [CODE]
 p = timetablemenuTag.parentNode.parentNode;
p.className = (p.className) ? p.className + ' timetable2' : 'timetable2';
p.class = p.className;
[/CODE]
Copy linkTweet thisAlerts:
@Tonyp543212003authorAug 26.2010 — Thanks for your quick reply. I still can't get this to work (see my source code below). Can you see what i am doing wrong?

<html>

<head></head><body>

<table><tr>

<td>

<a>

<div id=timetablemenu>Timetable</div>

</a>

</td>

</tr>

</table>

<script type="javascript">

var timetablemenuTag = document.getElementById('timetablemenu');

p = timetablemenuTag.parentNode.parentNode;

p.className = (p.className) ? p.className + ' timetable2' : 'timetable2';

</script>


<style>

.timetable2 {

background-color:green;

}

.timetable2:hover{

background-color:green;

}

</style>

</body>

Thanks,

Tony
Copy linkTweet thisAlerts:
@MGenevAug 26.2010 — I edited my example (by adding "p.class = p.className", for different browsers use different attribute names). Maybe you're using IE (which uses "class" attribute).

The other possibe reason could be that both CSS styles (.timetable2 and .timetable2:hover) actually set the background color to "green" so no change would occure. ?
Copy linkTweet thisAlerts:
@Tonyp543212003authorAug 26.2010 — Thanks for your posts.

I have tried this but no luck. I dont get green at all lol. I've tried IE and Firefox.

Manually entering the class into the html works and it displays green but the javascript does seem to be adding the class to the HTML.
Copy linkTweet thisAlerts:
@DanInMAAug 26.2010 — have you tried just overwriting the CSS rules your CMS is applying by using !important ?

example

<style>

.timetable2 {

background-color:green !important;

}

.timetable2:hover{

background-color:green !important;

}

</style>

</body>
Copy linkTweet thisAlerts:
@Tonyp543212003authorAug 26.2010 — ok it does work...me being stupid.

The only reason it didnt work was because i used:

<script type="javascript">

instead of

<script language="javascript">

Thanks for your help, i really appricate it! ?
×

Success!

Help @Tonyp543212003 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.15,
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,
)...