div:hover in IE?
Moderator: General Moderators
div:hover in IE?
My stylesheet has div:hover in it. Firefox recognizes and reacts to this as expected, but IE does nothing. Is there a javascript way for IE, to do what Firefox does naturally?
You can see what I'm doing on my website: http://randomresources.org
Colors change when you go over the divs.
Edit: and if anyone knows a good way to put things below floats without the thing being underneath the float, I could use that also.
You can see what I'm doing on my website: http://randomresources.org
Colors change when you go over the divs.
Edit: and if anyone knows a good way to put things below floats without the thing being underneath the float, I could use that also.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
C'mon. IE? seriously? Lol.
Of course they don't have div:hover.
IE supports a:hover and a
hover. I believe that, with IE7, they support a lot more though. However, pseudo elements are something that Microsoft doesn't seem to support well.
Don't fret. Just do it in JavaScript.
And then, in your CSS:
Of course they don't have div:hover.
IE supports a:hover and a
Don't fret. Just do it in JavaScript.
Code: Select all
var elem = elementWithDivs.getElementsByTagName('DIV');
for(var i = 0; i < elem.length; i++)
{
elem.onmouseover = function(){this.className = "whatever hover";};
elem.onmouseout = function(){this.className = "whatever";};
}Code: Select all
.whatever {
backgroundColor: #FFF;
}
.whatever.hover,
.whatever:hover {
backgroundColor: #CCC;
}Ok, I tried what you said and used:
Then in my stylesheet I have:
Code: Select all
<script language="Javascript">
<!--
var elem = elementWithDivs.getElementsByTagName('DIV');
for(var i = 0; i < elem.length; i++)
{
elem.onmouseover = function(){this.className = "dh";};
elem.onmouseout = function(){this.className = "d";};
}
-->
</script>Code: Select all
div.d
{
border: 1px dashed gray;
margin: 2px;
padding: 10px;
background: #FAFAFA;
font-size: 10pt;
}
div.dh, div.d:hover
{
background: #F0F8FF; /* color "aliceblue" */
font-weight: bold;
color: #708090; /* color "slategray" */
border: 1px dashed #9370DB;
}- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Well, if you goto my website you'll see what I'm doing. In firefox, when the mouse goes over one of the divs, it changes background color, border color, and the text becomes bold.
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
-
blackbeard
- Forum Contributor
- Posts: 123
- Joined: Thu Aug 03, 2006 6:20 pm
Try this:
Basically, you want to turn the a tag into a block, and encapsulate it inside a div tag. This way, you can position the div tag where you want it, and when they hover over it, they're really hovering over the a tag, and you can do whatever you need to. May need to tweak this some, it's off the cuff. If you use tables, you can do the same thing inside the cells.
Code: Select all
<style>
a, a:visited {display: block; height: 100%; width: 100% background-color: green;}
a:hover {background-color: red; }
div.link {height: 40px; width: 150px; }
</style>
<div class="link"><a href="www.example.com">My link</a></div>- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Oh umm... I didn't write the code for you. :-ptoasty2 wrote:Ok, I tried what you said and used:Then in my stylesheet I have:Code: Select all
<script language="Javascript"> <!-- var elem = elementWithDivs.getElementsByTagName('DIV'); for(var i = 0; i < elem.length; i++) { elem.onmouseover = function(){this.className = "dh";}; elem.onmouseout = function(){this.className = "d";}; } --> </script>Code: Select all
div.d { border: 1px dashed gray; margin: 2px; padding: 10px; background: #FAFAFA; font-size: 10pt; } div.dh, div.d:hover { background: #F0F8FF; /* color "aliceblue" */ font-weight: bold; color: #708090; /* color "slategray" */ border: 1px dashed #9370DB; }
"elementWithDivs" has to be defined, and I didn't write the array use correctly.
But if you're unfamiliar with how it's done in JS, use this instead. I'm feeling generous. :-p
Code: Select all
<script type="text/javascript">
var elem = document.getElementsByTagName('DIV');
for(var i = 0; i < elem.length; i++)
{
if(elem[i].className == 'd')
{
elem[i].onmouseover = function(){this.className = "dh";};
elem[i].onmouseout = function(){this.className = "d";};
}
}
</script>- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm