Page 1 of 1
div:hover in IE?
Posted: Wed May 30, 2007 10:59 am
by toasty2
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.
Posted: Wed May 30, 2007 11:09 am
by superdezign
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.
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";};
}
And then, in your CSS:
Code: Select all
.whatever {
backgroundColor: #FFF;
}
.whatever.hover,
.whatever:hover {
backgroundColor: #CCC;
}
Posted: Wed May 30, 2007 12:20 pm
by toasty2
Ok, I tried what you said and used:
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>
Then in my stylesheet I have:
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;
}
Posted: Wed May 30, 2007 12:22 pm
by Ollie Saunders
It may be possible to redesign your markup to use the A element and avoid messing around with js.
Posted: Wed May 30, 2007 12:41 pm
by toasty2
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.
Posted: Wed May 30, 2007 12:44 pm
by Ollie Saunders
In which case you can't. Why are you doing that anyway? It looks a little silly to me.
Posted: Wed May 30, 2007 12:54 pm
by blackbeard
Try this:
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>
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.
Posted: Wed May 30, 2007 1:37 pm
by superdezign
toasty2 wrote:Ok, I tried what you said and used:
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>
Then in my stylesheet I have:
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;
}
Oh umm... I didn't write the code for you. :-p
"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>
I think that's right. Tell me if it's not.
Posted: Wed May 30, 2007 3:26 pm
by toasty2
It doesn't work, so I guess its not right.
Posted: Wed May 30, 2007 3:37 pm
by superdezign
Strange. I'm looking through the code right now. I'll find out what's wrong soon enough...
Posted: Wed May 30, 2007 3:39 pm
by superdezign
Only took me like, 10 seconds. :-p
You have the JavaScript defined before those elements are even created. Put the script in the HTML somewhere after the divs.
Posted: Wed May 30, 2007 8:30 pm
by toasty2
It works, thank you.
Posted: Wed May 30, 2007 8:46 pm
by superdezign
^_^
It's always good practice.