Link:hover over a image doesn't work

djlinux · August 9, 2010, 11:36am

Hi everyone
I have problem with link #nextLink, because when I moving the mouse on #nextLink then #nextButton still don’t visible. This problem I observed in Opera 10.60. What’s more #nextButton and #prevButton doesn’t visible in IE 7 when I moving the mouse on #prevLink or #nextLink. Only for Firefox all look’s OK.
In my opinion html look’s ok, so I suppose problem in CSS.

PS: In Opera I see the #nextButton when I movinge the mouse on #nextLink after I turn on Dragonfly.

(X)HTML :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="pl" xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>

	<title>Red Point Studio</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<meta name="Description" content="Studio fotografii, sesje zdj&#281;ciowe, 
castingi, portfolia, galerie zdj&#281;&#263;, modelki, hostessy, fotomodelki" />
	<meta name="Keywords" 
content="fotomodeling,fotografia,portfolio,pozowanie,fotografia 
studyjna,agencja modelek,casting,Zamo&#347;&#263;,freestyle,Marcin,Opi&#322;a,taniec" />
	<meta name="Author" content="Red Point Studio" />
	<meta name="robots" content="all" />
	<meta name="distribution" content="global" />
	<meta name="copyright" content="Copyright (c) 2009 by Red Point Studio" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src="jquery.js" type="text/javascript"></script>
</head>

<body>
<div id="container"> 
	<ul id="menu">
	<li><a href="index.html">Aktualno&#347;ci</a></li>
	<li><a href="gallery.html">Kategoria #1</a></li>
	<li><a href="gallery2.html">Galeria #1</a></li>
	<li><a href="photo.html">Zdj&#281;cie</a></li>
	<li><a href="#">Kategoria #1</a></li>
	<li><a href="#">Kategoria #2</a></li>
	</ul>
	<span id="location"><a href="#">Red Point Studio</a> >> <a href="#">Kategoria</a> >> <a href="#">Szturm Twierdzy Zamo&#347;&#263;</a> >> <a href="#">Karolina Nowakowska</a></span><div id="language"><a href="#">English version</a></div>
	<div id="content">
	
	<h3> Karolina Nowakowska </h3>
	<div id="photo">
	<img src="photos/6.jpg" id="normal"/> 
	<div id="hoverNav">
		<a id="prevLink" href="#"><span id="prevButton"> </span> </a>
		<a id="nextLink" href="#"><span id="nextButton"> </span> </a>
		</div>
	<div id="description">Zabrania si&#281; kopiowania, reprodukowania, publikowania, umieszczania w 
Internecie, przesy&#322;ania, transmitowania, rozpowszechniania i/lub 
modyfikowania zdj&#281;&#263; .</div>

	</div>
	
	<div id="photoMini">
	<div id="prevPrevPhoto" class="photosMini"><a href="#"><img src="photos/6.jpg" class="normal" /> <div>Szturm Twierdzy Zamo&#347;&#263;</div></a></div>
	<div id="prevPhoto" class="photosMini"><a href="#"><img src="photos/7.jpg" class="normal" /> <div>Szturm Twierdzy Zamo&#347;&#263;</div></a></div>
	<div id="current" class="photosMini current"><a href="#"><img src="photos/8.jpg" class="high" /> <div>Szturm Twierdzy Zamo&#347;&#263;</div></a></div>
	<div id="nextPhoto" class="photosMini"><a href="#"><img src="photos/9.jpg" class="high" /> <div>Szturm Twierdzy Zamo&#347;&#263;</div></a></div>
	<div id="nextNextPhoto" class="photosMini"><a href="#"><img src="photos/10.jpg" class="high" /> <div>Szturm Twierdzy Zamo&#347;&#263;</div></a></div>
	</div>

	<a href="#">Powr&#243;t do galerii</a>
	
	</div>
	

	<div id="footer">Wszystkie materia&#322;y na tej stronie, w tym zdj&#281;cia s&#261;
 chronione prawami autorskimi i stanowi&#261; wy&#322;&#261;czn&#261; w&#322;asno&#347;&#263; Red Point 
Studio oraz os&#243;b kt&#243;re udzieli&#322;y zezwolenia na wykorzystanie ich 
wizerunku.
Zabrania si&#281; kopiowania, reprodukowania, publikowania, umieszczania w 
Internecie, przesy&#322;ania, transmitowania, rozpowszechniania i/lub 
modyfikowania zdj&#281;&#263; .
Jakiekolwiek wykorzystanie dowolnego z materia&#322;&#243;w w wy&#380;. wymieniony 
spos&#243;b jest pogwa&#322;ceniem w&#322;asno&#347;ci intelektualnej i jest niniejszym 
zabronione.<br /><a href="http://www.redpointstudio.pl/redpoint.html">created
 by Red Point Studio</a>
	</div>
</div>

</body>
</html>

CSS:


* {
	margin:0;
	padding:0;
}
body {
	text-align: center;
	margin: 0;
	background-color: #000000;
	color: #8a7b7b;
	font-family: tahoma,verdana;
	font-size: 12px;
	border:none;
}

img {
	border: 0;
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color:#9b0843;
}
a:hover {
	color: #f71b00;
}

h3 {
	margin-top:5px;
	font-size:13px;
	color:#8d0f00;
}

#content p {
	margin-top: 3px;
	border-top:1px #8d0f00 solid;
	text-indent: 10px;
}

#menu {
	top:195px;
	left:30px;
	position:absolute;
	width:170px;
	text-align:left;
}
#menu li a {
	color:#8d0f00;
	font-size:14px;
	font-family:Arial;
	font-weight: bolder;
}
#menu li a:hover {
	color:#f71b00;
}
#menu li{
	margin-top:5px;
	list-style-image: url(img/menu_btn.gif);
}
#menu li:hover {
	list-style-image: url(img/menu_btn_on.gif);
}

#location {
	position: absolute;
	top: 195px;
	left: 217px;
}
#language {
	position:absolute;
	top:195px;
	left:870px;
	padding:0 5px 0 5px;
}

#content {
	left:227px;
	top:210px;
	position:absolute;
	width:820px;
	height:655px;
	overflow: auto; 
	text-align:center;
}

#content-gallery {
	width: 755px;
	height: 650px;
	margin: 0 auto;
}

#container {
	background-image: url(img/bg.jpg);
	background-repeat:no-repeat;
	background-position: center;
	position:relative;
	width: 1100px;
	height: 874px;
	margin: auto;
	text-align:center;
}
#prev, #next, #prevUp, #nextUp {
	position:absolute;
	top:610px;
	left:35px;
}

#next, #nextUp {
	left:745px;
	background-color:#050505;
}

#prevUp, #nextUp 
{
	top: 22px;
}

#prevP {
	top:200px;
	left:120px;
	display:block;
	position:absolute;
}


#footer {
	top:880px;
	left:0px;
	font-size:9px;
	text-align:center;
	position:absolute;
}

.normal {
	width:180px;
	height:120px;
}
.high {
	width:80px;
	height:120px;
}
.photo {
	width:180px;
	float:left;
	margin-left:6px;
	margin-top:5px;
	border:1px #510423 solid;
	text-align:center;
	background-color: #050505;
}

.photo div {
	width:180px;
	top:10px;
}

#photo {
	width: 660px;
	margin: 0 auto;
	margin-top: 5px;
	background-color: #050505;
	border:1px #510423 solid;
}

#normal {
	width: 660px;
	height: 440px;
}

#high {
	height: 440px;
	width: 293px;
}

#description {
	padding: 0 5px 5px;
}

#photoMini {
	margin:0 auto;
	margin-top: 20px;
	width: 600px;
	background-color: #050505;
	height : 110px;
	border-bottom:1px #8d0f00 solid;
}

#photoMini > div {
	width: 100px;
	height: 110px;
}
	

#photoMini .normal {
	width: 100px;
	height: 75px;
}
#photoMini .high {
	width: 56px;
	height: 75px;
}

.photosMini {
	width:100px;
	float:left;
	margin-left: 20px;
}

.current {
	background-color:#131313;
}
.current  a {
	color: #8a7b7b;
}

#prevLink, #nextLink {
	height: 440px;
	position:absolute;
	width: 330px;
	left:80px;
	top:27px;
}
#nextLink {
	left: 410px;
}

#prevLink:hover #prevButton {
	display:block;
}

#nextLink:hover #nextButton {
	display:block;
}



#prevButton, #nextButton {
	background-image: url(img/prev.gif);
	background-repeat: no-repeat;
	position:absolute;
	top: 80px;
	width:80px;
	height: 25px;
	display:none;
}
#nextButton {
	background-image: url(img/next.gif);
	left:250px;
}


#prev_arrow, #next_arrow {
	top:560px;
	left:80px;
	position: absolute;
}
#next_arrow {
	left:710px;
}

On line version is available here: http://www.redpointstudio.pl/new/photo.html

djlinux · August 9, 2010, 3:42pm

Thank You!
Finally I solved that problem through

#prevLink { background-image: url("#"); }

and

 #prevLink:hover { background-image: url("path to image"); }

This solution works perfectly in IE, Firefox and Opera.

Stomme_poes · August 9, 2010, 12:35pm

The display: none, display: block thing is a pretty hackish way to do it, despite seeing it all over the interwebs.

Instead of having IE play with changing states, keep next and prev buttons display: block, instead of none, but just position them off-screen using a ridiculous left setting.


#prevButton, #nextButton {
    background-image: url(img/prev.gif);
    background-repeat: no-repeat;
    position:absolute;
    top: 80px;
[b]left: -999em;[/b]
    width:80px;
    height: 25px;
}

#prevLink:hover #prevButton, #nextLink:hover #nextButton {
    left: 0; /*or wherever is the right place*/
}

Notice the hover states are listed afterwards, not before.

Remember anyone who can’t get your images to load are getting nothing. A sort of mystery-meat button. Without text even. I would have trouble using this page.

If this changing-of-position is not a possible solution for you, then likely to get it working in IE, this might work (if the error is what I think it is):
before the other hover stuff in your stylesheet:

a:hover {
visibility: visible;
}

It doesn’t have to be “visibility”, but that’s one of a handful of properties that seem to “trigger” IE to change states of something on :hover. You could also change fonts or set a background colour or something, those all work. Visibility: visible is a safe one, though, because your buttons are already visible, so nothing changes.

The background one I’ve used to get proper appearance of absolutely positioned buttons in IE6 and 7 was
thething:hover {
background: url(#);
}
which apparently is valid, ignored by all the other browsers. In your case, however, you already have backgrounds, so this one may not be safe. Use visibility first.