[CSS] Visualizzare contenuto solo con a:hover

28-09-2010, 17.31.36

Ciao, sto realizzando un menù orizzontale che trovate qui: http://mypaglia.altervista.org/menu/

Il problema sta nel fatto che il testo dddd vorrei che apparisse solo quando passo il mouse sopra a "contatti".

Possibilmente senza utilizzare javascript.

Il codice css e html è questo:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Menu</title> 
    <style> 
    body {	background: #F2F2F2;
	font-family: Arial;
	font-size: 13px;
	line-height: 1.7;
	color: #444;}
	
	a {color: #666;
font-weight: bold;}
a:active {
color: #666;
}
a:hover {color: #444;}
#menu {margin: 0 auto;
margin-top: 0px;
float: right;
border-top: 5px solid #999;}
 
#menu ul{list-style: none;}
 
#menu li {display: inline;}
 
#menu li a{
 
text-decoration: none;
float: left;
 
width: 100px;
height: 25px;
margin:5px;
margin-top:0px;;
border: 1px solid #999;
text-align: center;
border-top: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-top-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-top-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
}
 
#menu li a:hover{
height: 100px;
text-align: center;
 
}
 
#menu li span{text-align: center;}
 
#menu a p {display:block;
	margin-top:10px;
	font-family:"Arial Narrow";
	font-size:20px;}
 
 
 
 
    
    </style> 
  </head> 
  <body> 
    <div id="menu"> 
 
<li><a href="#"><span>Home</span></a></li> 
<li><a href="#"><span>Blog</span></a></li> 
<li><a href="#"><span>Portfolio</span></a></li> 
<li><a href="#"><span>About Me</span></a></li> 
<li><a href="#"><span>Contatti</span><br><p>dddd</p></a></li> 
 
 
    </div> 
  </body> 
</html>

**javascripter** · 28-09-2010, 18.11.02

Imposta la proprietà display di #menu a p a none e subito dopo definisci #menu a:hover p dove imposti la proprietà display a block

Codice:

#menu a p {
	display:none;
	margin-top:10px;
	font-family:"Arial Narrow";
	font-size:20px;
}

#menu a:hover p{
	display: block;
}

Discussione: [CSS] Visualizzare contenuto solo con a:hover

LinkBack

Strumenti discussione

Display

[CSS] Visualizzare contenuto solo con a:hover

Regole di scrittura