Forum Moderators: open
I am just curious whether it is possible to test if an element is currently active in its hover state.
specifically if an elements pseudo:hover is active?
ex.
#thisDiv:hover
active == true
active == false.
something like that.
cheers!
I am having trouble with this a bit. Is there a way to change this to testing the element:hover, on the basis of true or false?
so basically removing the onclick.
I want to hide/show certain elements depending on if another element has element:hover == true.
So basically giving that alert("this hover state is active"); without having to click.
can't crack it so far!
thanks!
well I have been battling with this for days and am a bit stuck... but I am learning about cross-browser javascript a bit!
I am currently stuck making this function work in Mozilla as well... the checkHover() function works if I use document.onclick, but if I try to get more specific than that I start to get stuck.
basically I want it working exactly as it is in IE (which is working perfectly)
code below! cheers if you look! :-)
-----
<!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">
<!--
// IE function
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
}
}
}
}
// mozilla function
checkHover = function() {
document.onclick = function() {
alert("yeahhhhhhh");
}
}
// load events
if ( window.attachEvent ) {
window.attachEvent("onload",sfHover);
}
else if ( window.addEventListener )
{
window.addEventListener("click",checkHover,true);
}
//-->
</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.sfhover { display: block; background: yellow; filter: alpha(opacity=50); }
#leadContainer:hover { display: block; opacity: .5; background: yellow; }
</style>
</head>
<body>
<div id="wrapper">
<div id="leadContainer">This is the element.</div>
</div>
<span id="help">Help bubble</span>
</body>
</html>
basically I want to start up a help feature for an existing page I have. I want to use alternative stylesheets that will cause the following action.
1) cause block-level container divs to have a pseudo:hover state (which I chose opacity, #fff, 50%) when hovered.
2) when (for example) #main_story:hover is active, then I will have a corresponding unordered list (or span, etc) at the bottom of the page that will turn on/off depending on it's related block-level container div's actions.
make sense? (maybe not, here is an example):
----
<div id="main_story>
<p> content here </p>
<img src="picture.jpg" />
</div>
<ul>
<li id="main_story_tip">content</li>
<li id="second_story_tip">content</li>
<li id="left_nav_tip">content</li>
</ul>
----
so in the above example, when #main_story hover is active, then #main_story_tip would be styled to display: block, instead of hidden.
I did get this working in IE, but I think I went a bit off course as I was using the suckerfish based functions and might have gone a bit over-complicated. I need to tackle it with a fresh perspective I think.
so any ideas welcome. thanks!
