[thelist] Hover events within a UL
ben morrison
morrison.ben at gmail.com
Fri Feb 9 03:57:45 CST 2007
On 2/9/07, Craig Givens <nospamaddy at gmail.com> wrote:
> Hello fellow Evolters,
>
> I'm trying to apply an :hover event to a UL so that when a user mouses
> over the block, the entire block appears to change background colours
> and is also clickable with an applied <a href="link.htm">. Here is a
> sample of what I worked up:
>
> http://www.geocities.com/markjohnson45/sample.html
>
> However, there are some problems:
>
> 1) I can only seem to highlight the block in Firefox, not IE
> 2) I cannot make the entire block clickable because an HREF cannot be
> wrapped around a UL in the markup
> 3) The LI within the UL gets highlighted and changes colour, but the
> <h3> within the UL does not (unless I hover it specifically).
As Will pointed out you have quite a few problems cropping up -
especially with your HTML.
A better structure could be:
<div class="newsPanel">
<img src="thumb.gif" alt="thumb1" width="52" height="55" />
<h3><a href="#">Sample Header 3</a></h3>
<p>Sample Copy Text, Sample Copy Text, Sample Copy Text, Sample Copy Text</p>
</div>
> Is there any way to overcome all of these problems with some fancy CSS
> rules and tricks?
CSS can only get you so far and sometimes a little unobtrusive
javascript[1] can help.
What is required:
[a] find all the newsPanel divs
[b] add a mouseOver class so we can style it differently
[c] remove the class on mouseout
[d] find a link and make the whole area clickable
Annoyingly there is not a way to get all the class elements using the
DOM but there are numerous workarounds such as getElementsByClass [2]
<script type="text/javascript">
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
//Now create a function to add in our extra functionality
function newsHover (section) {
if (!document.getElementsByTagName) return false;
var tags = getElementsByClass(section);
for (i=0;i<tags.length;i++) {
tags[i].onmouseover=function() {this.className+=" newsHover";}
tags[i].onmouseout=function()
{this.className=this.className.replace(new RegExp(" newsHover\\b"),
"")}
tags[i].onclick = function () {location.href =
this.getElementsByTagName("a")[0].href}
}
}
//Now we can get an array of all our 'newsPanels' by calling the
function and passing it the class name, for this example i'll use a
simple window.onload call
window.onload=function() {newsHover('newsPanel')};
</script>
You can now use as many different styles as you like for the rollover, ie
.newsHover {
background:#F4D9D9;
cursor:pointer;
}
.newsHover h3 {
color:#fff;
background:#BA0000
}
ben
[1] http://www.onlinetools.org/articles/unobtrusivejavascript/
[2] http://www.dustindiaz.com/getelementsbyclass/
--
Ben Morrison
More information about the thelist
mailing list