Ver Mensaje Individual
  #10 (permalink)  
Antiguo 19/07/2008, 10:33
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: efecto mouseover para <div>

Hola, Pedro.

Tenía un rato y me he puesto a hacer este ejemplo

Es el código que estabas usando en principio, bastante modificado, con la imagen del fondo y el truco del posicionamiento que te decía.

Es perfectamente válido xhtml strict y css2. El texto es texto, no imagen, aunque igualmente no se puede seleccionar porque está dentro del enlace, pero mucho más fácil de editar. No es demasiado complicado, y funciona muy bien en FF y IE6:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>TRATTORIA LA VENEZIANA - OCIO</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0;
}
#contenedor{
width:768px;
margin: 0px auto;
background:#fff;
font: normal 0.8em Arial, Helvetica, sans-serif;
}
.portada {
height:100px;
margin-top:1em;
padding:5px;
border:#ccc 1px solid;
}
a.principal{
display: block;
text-decoration: none;
background: url(img/40.jpg) no-repeat right top;
height:100px;
}
a.principal:hover {background-position: right bottom;
}
a.principal:hover span.titulo {border-color: #0f0;
}
span.titulo{font:bold 1.2em Arial, Helvetica, sans-serif;
border-bottom:#A177B2 3px solid;
display: block;
margin-right: 260px;
color: #000;
}
span.primero{margin-top:1em;
display: block;
margin-right: 260px;
color: #000;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="portada">
<a href="#" class="principal">
<span class="titulo">ESPECIALIDADES</span>
<span class="primero">En la Trattoria <strong>La Veneziana</strong>ofercemos una amplia variedad de platos de cocina italiana,
entre los que destacamos nuestra <strong>pizza serrana</strong>, el <strong>carpaccio de buey</strong>, las lasañas,
<strong>la pasta rellena</strong>, y nuestro exquisito <strong>tiramis&uacute;.</strong></span>
</a>
</div>
</div>
</body>
</html>
A ver si te sirve, que lo del texto en imagen me parece el último recurso.

Mikel.