Styling Parent Hover/mouseover state

**Tonyp543212003** · 08-26-2010, 05:14 AM

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

**MGenev** · 08-26-2010, 06:34 AM

Code:

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

**Tonyp543212003** · 08-26-2010, 07:42 AM

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

**MGenev** · 08-26-2010, 08:20 AM

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.

**Tonyp543212003** · 08-26-2010, 10:16 AM

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.

**DanInMA** · 08-26-2010, 10:42 AM

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>

**Tonyp543212003** · 08-26-2010, 10:43 AM

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!

Thread: Styling Parent Hover/mouseover state

Thread Tools

Display

Styling Parent Hover/mouseover state

parent style class

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions