[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