[SOLUCIONADO] Aplicar enlace a div

[crafter_v]

Hola, tengo una página con diferentes tipos de enlaces, ya he conseguido aplicar estilos diferentes a varios enlaces a traves de las clases pero me ha surgido un nuevo problema:

Quiero crear un enlace que sea un div "elemento" que contiene en su interior otros tres divs (una imagen, un separador <hr> y un texto. Quiero que el div "elemento" funcione como enlace a otra sección de la web y que al pasar el cursor sobre cualquier parte de el, cambie el color del div "texto" que esta en su interior.

He probado aplicando una clase al enlace pero solo funciona si el enlace es un texto individual, al aplicar la clase a todo el div "elemento" no funciona.

[pzin]

Puedes usar las pseudo-clases en el lugar que necesites dentro del selector.

Por ejemplo, si te entendí bien y tienes algo así:

Código HTML:

<a href="#">
  <img src="imagen.png">
  <hr>
  <div class="texto"></div>
</a>
 

Puedes hacer que cambie el color de la clase texto al pasar por encima del enlace así:

Código CSS:

a:hover div.texto {
  color: blue;
}
 

Aunque sería más correcto, sin saber mucho más acerca de la estructura, que usaras un párrafo (p) para el texto.

[crafter_v]

Solo me cambia el color del subrayado. Añado el codigo de la estructura de como lo tenia antes:

<div id="apartado">
<a href="wolf.html" class="clase1"><img src="images/wolf.jpg" width="274" height="202" />
<div id="foto">
<img src="images/wolf.jpg" width="274" height="202" />
</div>
<div id="texto1">
THE IBERIAN WOLF
<div id="linea2">
<hr size=1 width=12px align="left" color="#000000"/>
</div>
Interactive infographic about the Iberian wolf.
</div>
<div id="linea">
<hr size=1 width=274px align="left" color="#000000"/>
</div>
</a>
</div>


A.clase1:link {text-decoration:underline;color:#000;}


A.clase1:visited {text-decoration:none;color:#000;}


A.clase1:active {text-decoration:none;color:#000;}


A.clase1:hover {text-decoration:underline;color:#999;}

[crafter_v]

<div id="apartado">
<a href="wolf.html" class="clase1">
<div id="foto">
<img src="images/wolf.jpg" width="274" height="202" />
</div>
<div id="texto1">
THE IBERIAN WOLF
<div id="linea2">
<hr size=1 width=12px align="left" color="#000000"/>
</div>
Interactive infographic about the Iberian wolf.
</div>
<div id="linea">
<hr size=1 width=274px align="left" color="#000000"/>
</div>
</a>
</div>


A.clase1:link {text-decoration:underline;color:#000;}


A.clase1:visited {text-decoration:none;color:#000;}


A.clase1:active {text-decoration:none;color:#000;}


A.clase1:hover {text-decoration:underline;color:#999;}

[pzin]

Tienes que crear un selector aparte, ya que color es para el texto.

Código CSS:

a.clase1:hover hr {
  border-color: #999;
}
 

[webosiris]

ese código html está mal formado.
Un enlace A es un elemento en línea, que no tiene permitido contener un elemento DIV que es un elemento en bloque.

Además en el código veo muchos divs innecesarios. y atributos obsoletos.. yo me concentraría primero en tener un html correcto.

[pzin]

Iniciado por webosiris

Un enlace A es un elemento en línea, que no tiene permitido contener un elemento DIV que es un elemento en bloque.

Cabe destacar, a modo informativo, que esto en HTML5 ya no es así y que se permite. Aunque si bien es cierto que para poner un div con clase "texto", a mi se me hace más usar un párrafo.

[crafter_v]

¿Tal vez asi?



<div id="apartado">
<div id="foto">
<a href="karumbe.html"><img src="images/karumbe.jpg" width="274" height="205" /></a>
</div>
<p class="texto1">KARUMBÉ</p>
<p class="linea2">
<hr size=1 width=12px align="left" color="#000000"/>
</p>
<p class="texto1">Identity, corporate stationery and bag for this foundation of help for the sea turtles.</p>
<p class="linea">
<hr size=1 width=274px align="left" color="#000000"/>
</p>
</div>

[pzin]

¿Por qué abres un tema nuevo preguntando lo mismo? ¿No se lograste solucionarlo con las indicaciones que te dimos? Porque no veo ningún "no funciona" ni nada. :-/

[crafter_v]

Es que no funciona, y he cambiado el código a como me dijisteis. Creo que ahora esta correcto, pero no logro que funcione.

[crafter_v]

Quiero decir que el HTML ahora creo que esta correcto, pero no logro que salga el efecto.

[crafter_v]

el código ahora es:

<div class="apartado">
<a href="wolf.html">
<img class="estilo1" src="images/wolf.jpg" width="274" height="202" />
<h1 class="estilo1">
THE IBERIAN WOLF
</h1>
<hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
<p class="estilo1">
Interactive infographic about the Iberian wolf.
</p>
<hr class="estilo2" size=1 width=274px align="left" color="#000000"/>
</a>
</div>



A:link {text-decoration:none;color:#000;}


A:visited {text-decoration:none;color:#000;}


A:active {text-decoration:none;color:#000;}


A:hover {
text-decoration:none;
color:#999;
border-color:#999999;
}


A {outline:none;}


.apartado {
width:274;
height:auto;
margin: 0px 0px 0px 0px;
}

[crafter_v]

.estilo1{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 150%;
font-style: normal;
}


h1.estilo1{
margin: 25px 0px 0px 0px;
}

p.estilo1{
margin: 0px 0px 0px 0px;
}


hr.estilo1{
margin: 12px 0px 12px 0px;
}


img.estilo1{
width:274px;
margin:0px 0px 0px 0px;
}


.estilo2{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 150%;
font-style: normal;
}


hr.estilo2{
margin: 25px 0px 75px 0px;
}

[crafter_v]

el hr no cambia de color y el subrayado no quiero que aparezca, lo quiero solo para otros botones del menu principal

[crafter_v]

Lo de las pseudoclases funciona, lo acabo de probar, puedo cambiar el color independientemente, pero no el subrayado que si quiero que aparezca en otros links.

[crafter_v]

Solucionado! Tal como decias con pseudoclases, pero para todos los links.