Change Style OnMouseOver

[field4000]

Hey all,

I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element.

I have a DL with one DT & and one DD.

I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'.

The code:

<dl onclick="document.location='#'">­
<dt>
<p>Text< /p>
</dt>
<dd class="background">
<p>Text</p>
</dd>
</dl>

Any help with this would be much appreciated.

Cheers in advance.

[lavazza]

CSS

.myMouseOverHover:hover{
color:#FF0000;
}

HTML
<dl>
<dt class="myMouseOverHover">
DT1 Individual DDs can have a hover effect
</dt>
<dd class="myMouseOverHover">
DD1a Text
</dd>
<dd>
DD1b Text NO HOVER
</dd>
<dd class="myMouseOverHover">
DD1c Text
</dd>
</dl>

<dl class="myMouseOverHover">
<dt>
DT2 The WHOLE DL has ONE hover effect
</dt>
<dd>
DD2a Text
</dd>
<dd>
DD2b Text
</dd>
<dd>
DD2c Text
</dd>
</dl>

[Robin_reala]

lavazza's sort of answered your question already, but I'll have a stab at this as well. There's two answers. If you can ignore IE5+6, you can use something like:

dl dd { background: red; }
dl:hover dd { background: green; }

Note - with CSS only you can't change classes, but that's OK as you just set your rules to apply directly to the :hover state.

The problem with that solution is that as mentioned IE5 and 6 don't support :hover and anything but <a> elements. So for them you'd need some Javascript. For this it probably is easier to swap classes like you originally suggested:

function dlHoverInit() {
 dls = document.getElementsByTagName("dl");
 for(i=0;i<dls.length;i++) {
  dls[i].onmouseover = dlMouseOver;
  dls[i].onmouseout = dlMouseOut;
 }
}
function dlMouseOver() {
 dds = this.getElementsByTagName("dd");
 for(i=0;i<dds.length;i++){
  dds[i].className = "backgroundOver";
 }
}
function dlMouseOut() {
 dds = this.getElementsByTagName("dd");
 for(i=0;i<dds.length;i++){
  dds[i].className = "background";
 }
}

That JS is totally untested but should at least give you some idea of where to start.

[field4000]

Thanks guys.

I figured out how to do what I wanted.

I used:

onmouseout="document.getElementById('products04').className='background'"; onmouseover="document.getElementById('products04').className='backgroundOver'"

With id="product04" on the element that I wanted to change.

Cheers for the help!