div:hover in IE?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

div:hover in IE?

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

C'mon. IE? seriously? Lol.

Of course they don't have div:hover.

IE supports a:hover and a:link: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;
}
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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;
}
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

It may be possible to redesign your markup to use the A element and avoid messing around with js.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

In which case you can't. Why are you doing that anyway? It looks a little silly to me.
blackbeard
Forum Contributor
Posts: 123
Joined: Thu Aug 03, 2006 6:20 pm

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

It doesn't work, so I guess its not right.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Strange. I'm looking through the code right now. I'll find out what's wrong soon enough...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

It works, thank you.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

^_^

It's always good practice.
Post Reply