Topic: css a:hover to change background (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=11085" title="Pages that link to Topic: css a:hover to change background (Page 1 of 1)" rel="nofollow" >Topic: css a:hover to change background <span class="small">(Page 1 of 1)</span>\

 
Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 10-23-2003 20:58

Using:

<style type="text/css">
#switcher a img {
background-color: #999999;
}

#switcher a:hover img {
background-color: #000000;
}
</style>


<div id="switcher"><a href="#"><img src="blah.gif" width="200" height="200" border="0" alt="" /></a></div>


The first one works, but the a:hover doesn't. What am I missing?

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-23-2003 22:03

It works in Mozilla, just not IE. IE does tend to have poor support for pseudoclasses affecting anything other than a link itself.

Unless I'm overlooking something simple, your best bet is to get rid of the anchor tag middleman, apply the :hover style to the image itself, and use a script to acheive the effect in IE.

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 10-23-2003 22:21

Hmmm...ok

I looked at http://www.fastcompany.com/ and the rollover effect for the little buttons in the upper right is what I'm after. That works in IE 6.0 SP1 fine...... I took that code, and plugged it in, and I've got this problem.....I'll look around.

Thanks!

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-23-2003 22:31

Oh, you're right. Hmm.

Weird... I'm finding that if I hold down the mouse button (in your example), without releasing, I get the on-hover color.

I'll keep looking into this...

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 10-26-2003 03:18

just curious as to wether or not this has been figured out....................

Later,

C:\


~Binary is best~

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 10-26-2003 03:56

Pugzly: To get your style working in IE and Mz, you must remove the img tag name in the CSS, just like that :

code:
<style type="text/css">
#switcher a {
background-color: #999999;
}

#switcher a:hover {
background-color: #000000;
}
</style>

Honestly I'm not exactly sure to know why it works than way and not yours. IE only supports the :hover pseudo class on the a tags but it also supports descendant selectors so your CSS should have worked...well, it must be another of IE's misteries.

Anyway, hope that helps.

Mathieu "POÏ" HENRI

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 10-26-2003 04:21

Ah. That seems to work.....interesting.

Thanks for the help!



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu