5 replies [Last post]
gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 14 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

I have a related thread on this, but it's taking a bit of a js turn so thought I might move it in here.

I am trying to test a div with js. I want a function that responds to a pseudo:hover in Mozilla.

so:

function checkHover() {
if (element:hover) {
show this element;
} else {
do nothing;
}
}

does that make sense? so far I can't find anything online about checking the css hover status. Basically I just want to show a help balloon if a certain <div> is highlighted with the pseudo:hover.

I have it working in IE with some suckerfish tweaked code, but now I am stuck with mozilla.

cheers!

Tags:
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

a:hover events

There is whatever:hover which assigns a pretty good approximation of :hover behaviour to IE. Its not 100% compatible with everything you can do with :hover but its more than good enough for a straight :hover over a single element.

Otherwise, what you want is to assign an "onmouseover" and "onmouseout" scripts to the element. The first script will display the help tip and the second hide it. There are quite sophisticated javascript libraries available on the web that do this stuff. I prefer DOMTT, but there are others.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 14 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

a:hover events

wow... that DOMTT thing looks interesting... will look into it and let you know how it goes... thanks!

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 14 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

a:hover events

so I have found a solution for this and am now implementing/experimenting with this code. One question though:

In IE 6 (PC) if you notice, the pseudo-hover renders strangely. Kind of like a curtain going down or something.

Does anyone know why? or if there are solutions to this?

cheers!!!

p.s. the js is still a bit messy (too specific) but just wanted to get the basics working first...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("wrapper").getElementsByTagName("div");
	if (sfHover)	{
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover = function() {
				this.className += " sfhover";
				document.getElementById("help").style.display = "block";
			}
			sfEls[i].onmouseout = function() {
				this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
				document.getElementById("help").style.display = "none";  // this needs to be generic
			}
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
	
	
<style type="text/css">
#leadContainer {
width: 200px;
height: 600px;
position: relative;
background: red;
}
#help {
width: 200px;
height: 200px;
display: none;
position: absolute;
background: red;
top: 100px;
left: 100px;
}

#leadContainer:hover, #leadContainer.sfhover {
display: block;
background: transparent url(html/images/global/grey_grid.gif) repeat 0 0;
}
#leadContainer:hover #help { display: block; }
</style>
</head>

<body>

<div id="wrapper">
	<div id="leadContainer">This is the element.<span id="help">Help bubble</span></div>
</div>


</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

a:hover events

gleddy wrote:
wow... that DOMTT thing looks interesting... will look into it and let you know how it goes... thanks!

Yeah, some great examples in there.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

a:hover events

I am not 100% on this, so you may want to check it out.

In IE, I don't think you can use "this" as a reference to the element the event is being fired on when the event handler has been set by attachEvent. I believe IE's attachEvent function copies the function by reference (not value) so its parent object remains "window". The equivalent DOM function (for use in Opera and Gecko browsers), addEventListener, copies the function by value so "this" can be used.