I came across a strange webkit bug today affecting Chrome and Safari. I had an a:hover on a li and all it did was change the background on hover. The problem was it worked on all browsers except Chrome and Safari.
The code was .nav ul li a:hover so I also added .nav ul li:hover a to the line and that fixed the problem in both Safari and Chrome.
To sum up:
.nav ul li a:hover {}
Became…
.nav ul li a:hover, .nav ul li:hover a { }
Very, very unusual for IE6 to be happy but modern browsers flip out…
I got the same issue today. I never met it before. Maybe it
only occurs for ul lists ? In my case it was for the following CSS
snippet :
section.content nav ul li a:hover,section.content nav ul li:hover a{ ... }
I love you, and want to have your children. In 5 minutes you got to the heart of a problem I’ve been trying (on and off, admittedly) to solve for MONTHS. All along I thought my shoddy knowledge of CSS3 was to blame.
Thanks
Hehehe now that’s what I call thanks
Wow…thank you. Just finishing designing this site, and what seems like confused many people for some time, I fixed in minutes. THANK YOU.
Here is my code:
#mainNav li a:hover, #mainNav li:hover a {
color: black;
text-decoration: none;
font-weight:bold;
display: block;
background: #81A3A2;
border-right: thick solid #000;
}
Thanks! I had the same problem. I’m using the HTML5 nav element with span children and it worked great for me.
header nav a:hover, header nav span:hover a{ }
To be honest, not a WebKit bug… see: StackOverflow: Background image problem in Google Chrome and Safari
Hey,
I sill have a lil prob with images hover. can you help me?
apparently works on firefox but on safari/chrome appears a dead image ? icon on top of the xxxxx.png.. actually the xxxxx.png is there and the hover works but I get this anoing dead image ? icon on top :\
CSS:
.signuphome{background-image:url(xxxxx.png);width:102px;height:40px;}
.signuphome:hover{background-image:url(xxxxx.png);width:102px;height:40px;}
Code:
thx in advance