Css -> a:hover en/of mouseover fout

Door Jelle - op 06-06-2006 18:33

626 views

Ik wil als de muis over een vlak (ListItem) gaat dat de achtergrond van het vlak dan een ander plaatje wordt :D

Ik heb 2 dingen geprobeert (zie voorbeeld) maar beide werken niet <_<
Wie kan me hiermee helpen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
	  #ultest {
	    list-style: none;
		margin: 0px;
		padding: 0px;
	  }
	  .home {
		float: left;
		width: 193px;
		height: 48px;
		background-image: url(img/home-button.jpg);
	  }
	  /* Deze voor 'a:hover' (proberen) */
	  .home a:hover {
		background-image: url(home-button-overlay.jpg);
	  }
	  /* Deze proberen bij 'onMouseOver' */
	  .home2 {
	    display: block;
		float: left;
		width: 193px;
		height: 48px;
		background-image: url(home-button-overlay.jpg);
	  }
    </style>
  </head>
  <body>
    <div style="width: 800px; margin:auto;">
      <ul id="ultest">
	    <li><a class="home"></a></li>
        <li><a class="home" onMouseOver="this.class='home2'" onMouseOut="this.class='home'"></a></li>
      </ul>
    </div>
  </body>
</html>

Leo

06-06-2006 18:37

ik doe het zo bij mijn menu:


#menu {
	width: 1000px;
	height: 32px;
	background: url('images/menu_bg.gif');
	float: left;
	margin: 0px;
	padding: 0px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	list-style: none;
	}

#menu li {
	background: url('images/menu_schijding.gif');
	margin: 0px;
	padding-right: 1px;
	float: left;
	}
		
#menu li a {
	height: 23px;
	display: block;
	float: left;
	background: url('images/menu_bg.gif');
	color: #FFFFFF;
	text-decoration: none;
	padding-left:7px; 
	padding-right:7px; 
	padding-top:9px; 
	padding-bottom:0px;
	}

#menu li a:hover {
	color: #000000;
	background: url('images/menu_hover.gif');
	}
	
#menu li a .selected {
	color: #000000;
	background: url('images/menu_selected.gif');
	}

het menu werkt dan zo:


<div id="menu">
<li></li>
<li></li>
<li></li>
</div>

Pas op! geen <ul> erbij doen want dan word je css verneukt.. ookal moet het wel om je pagina xhtml valid te krijgen ;)

Jelle -

06-06-2006 18:39

jah maar al mijn 'opties' (nu alleen home) hebben een ander plaatje. (Als 'gewoon' en bij 'hover')
En in totaal heb ik 3 verschillende 'opties'
En dat werkt niet met jouw manier. Jij hebt in je voorbeeld niet voor elke optie een ander plaatje.

Leo

06-06-2006 18:58

Dus een andere hover? of een ander achtergrondplaatje?

Bo az

06-06-2006 19:05

het is niet this.class maar:
this.className

maar je kan ook in je css:
.home{
}
.home:hover{
}

Leo

06-06-2006 19:09

of in elke tag even een andere background aangeven? en de background dan even bij de css weghalen.. dat moet ook lukke

bart van der veen

06-06-2006 19:20

zoiets?


a#home {
width:115px;height:25px;display:block;background:url(img/home.jpg);
}
a#home:hover {
background:url(img/home_over.jpg);
}
a#adres {
width:115px;height:25px;display:block;background:url(img/adres.jpg);
}
a#adres:hover {
background:url(img/adres_over.jpg);

<a href='#' id='home' title='terug naar bartbart'>&nbsp</a>
<a href='#' id='adres' title='Zoek een nieuwe adres'>&nbsp</a>

Jelle -

06-06-2006 19:44

@ Boaz
Lol kleine foutjes,
Nu werkt het :-)

@ Leo, bart van der veen
Ook bedankt ;-)

@ bart van der veen
Ik heb je optie nog niet geprobeert maar ga ik wel nog doen :-)

Jelle -

07-06-2006 07:41

@ bart ja dat is inderdaat wat werkt :-)

Remco van Arkelen

07-06-2006 07:55

Let op, this.className werkt alleen in Internet Explorer en (volgens mij) niet in andere browsers.

Bo az

07-06-2006 08:50

Remco van Arkelen schreef op 07.06.2006 07:55
Let op, this.className werkt alleen in Internet Explorer en (volgens mij) niet in andere browsers.

Ik heb het getest in IE, FF en Opera en guess what? Het werkt !

Reageren

Inloggen om te reageren