convertir un div en un enlace

capagris · #1 (**permalink**) 06/11/2013, 08:51

Muy buenas estoy intentando que un div se convierta en un boton y que al pasar en cursor por encima cambie el color de fondo del div pero no me sale. estoy haciendo esto:

El codigo HTML con CSS:

Código HTML:

<a href="#" class="boton">
<div style="width:332px; height:41px; background-color:#2fb983; position:inherit; float:left; color:#FFF; padding:80px 0 0 20px; font-size:22px;">texto de ejemplo</div></a>

el CSS del enlace:

Código HTML:

a.boton:hover {background:#dd0028;}

No quiero que el enlace sea en el texto, si no en todo el DIV. Saludos

PHPeros · #2 (**permalink**) 06/11/2013, 09:12

Dale diferente altura o anchura al div, solo es un efecto óptico lo que ocurre.

capagris · #3 (**permalink**) 06/11/2013, 09:36

Cita:

Iniciado por PHPeros

Dale diferente altura o anchura al div, solo es un efecto óptico lo que ocurre.

perdona pero no te entiendo, si lo que quiero es que cambie de color el fondo del div al pasar el cursor...

jonni09lo · #4 (**permalink**) 06/11/2013, 09:56

Unas observaciones, deberías usar span en vez de div si un a va a ser el padre.

Si lo cambias, el span debe tener display inline-block o block

Con respecto a tu dilema es tan sencillo como esto:

Código CSS:

Ver originala.boton:hover, a.boton:hover div {
    background:#dd0028;
}

Saludos

Faks · #5 (**permalink**) 06/11/2013, 10:14

Si es para hacer un boton, proba esto:

Código HTML:

Ver original<a href="#" class="boton">Texto de prueba</a>

Código CSS:

Ver originala {
    padding: 0;
    margin: 0;
    text-decoration: none;
}
 
a.boton {
    display: block;
    width: 332px; 
    height: 41px;
    background-color:#2fb983;
    position:inherit;
    float:left;
    color:#FFF;
    padding:80px 0 0 20px;
    font-size:22px;
}
 
a.boton:hover { background:#dd0028; }

Con el "display: blocK" haces que se comporte prácticamente como un div.
Acá la demo:

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
 
<style>
a {
    padding: 0;
    margin: 0;
    text-decoration: none;
}
 
a.boton {
    display: block;
    width: 332px; 
    height: 41px;
    background-color:#2fb983;
    position:inherit;
    float:left;
    color:#FFF;
    padding:80px 0 0 20px;
    font-size:22px;
}
 
a.boton:hover { background:#dd0028; }
 
</style>
 
</head>
<body>
 
<p><a href="#" class="boton">Texto de prueba</a></p>
 
</body>
</html>

capagris · #6 (**permalink**) 06/11/2013, 11:07

Muchas gracias por vuestras respuestas pero creo que lo vais a entender mejor si os pongo un enlace: http://capagris.com/torrina/

Como podréis ver son unas cajas hechas con div que van a estar en el body del index, en realidad hacen el papel de menús y lo que quiero es con ya he dicho que al poner el cursos encima de una de estas cajas cambie el color y se salga una sombra al borde de la caja.... es un tema que me urge mucho.

muchas gracias a todos

Mxrck · #7 (**permalink**) 06/11/2013, 11:27

<a> es un elemento de línea por lo que no debes poner un elemento de bloque como <div> dentro de él, según normas de la w3c está mal y al estar mal cada navegador lo puede interpretar como mejor hayan pensado sus programadores que tu querías que se comportara.

Por otro lado sobre tu problema ya te han comentado, puedes hacer algo como:

index.html

Código HTML:

Ver original<div class="bloque">
    <a href="#" class="enlace">
        <span class="texto">Grupo</span>
    </a>
</div>

style.css

Código CSS:

Ver originaldiv.bloque {
    position: relative;
    cursor: pointer;
    background: #HEX;
    ...
}
div.bloque:hover {
    background: #HEX;
    box-shadow: ...;
    ...
}
a.enlace {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
span.texto {
    position: absolute;
    top: #px;
    left: #px;
    color: #HEX;
    ...
}

o usar javascript para hacer clickeables tus divs

Faks · #8 (**permalink**) 06/11/2013, 12:07

Cita:

Iniciado por capagris

Muchas gracias por vuestras respuestas pero creo que lo vais a entender mejor si os pongo un enlace: [url]http://capagris.com/torrina/[/url]

Como podréis ver son unas cajas hechas con div que van a estar en el body del index, en realidad hacen el papel de menús y lo que quiero es con ya he dicho que al poner el cursos encima de una de estas cajas cambie el color y se salga una sombra al borde de la caja.... es un tema que me urge mucho.

muchas gracias a todos

Se puede hacer perfecto con la respuesta que te di.

Simplemente crea 2 divs
Flotas uno a la derecha y el otro a la izquierda
En el de la derecha haces 3 divs con full width
Donde van los botones pones enlaces con las propiedades que te pase mas arriba editadas
Ya tenes lo que buscas

capagris · #9 (**permalink**) 06/11/2013, 12:44

Muchas gracias por vuestras aportaciones me habéis ayudado mucho, al final lo voy a hacer como indica "Faks"

Solucionado!!!!

Saludos!!!!

pzin · #10 (**permalink**) 06/11/2013, 12:54

Respuesta corta:

Código HTML:

Ver original<a>
  <div></div>
</a>

Código CSS:

Ver originala div {
  background-color: yellow;
}
 
a:hover div {
  background-color: firebrick;
  box-shadow: 0 0 10px 5px black;
}

Si usas HTML5 puedes poner un div y otros elementos de bloque dentro de los enlaces, como un párrafo, una cabecera y demás.

La respuesta larga; si es una lista de enlaces, lo más indicado sería usar una lista desordenada:

Código HTML:

Ver original<ul>
  <li><a></a></li>
  <li><a></a></li>
</ul>

Y si necesitas que exista un espacio superior, y esto te vale para lo anterior también, no te hace falta ningún elemento extra, simplemente le añades un relleno y lo presentas como elemento de bloque:

Código CSS:

Ver originalul {
  padding: 0;
  list-style: none;
}
 
a {
  display: block;
  background-color: yellow;
}
 
a:hover {
  background-color: firebrick;
  box-shadow: 0 0 10px 5px black;
}