Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Cómo hacer en CSS3 que un hover sobre un texto muestre un artículo en otra sección?

Estas en el tema de Cómo hacer en CSS3 que un hover sobre un texto muestre un artículo en otra sección? en el foro de CSS en Foros del Web. Saludos, ya terminé mi pequeño video-curso introductorio de HTML5 y CSS3 :) así que decidí ponerme a prueba haciendo mi propio sitio, En el tutorial ...
  #1 (permalink)  
Antiguo 04/09/2013, 08:29
Avatar de infoholico  
Fecha de Ingreso: agosto-2013
Ubicación: Venezuela
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 0
Cómo hacer en CSS3 que un hover sobre un texto muestre un artículo en otra sección?

Saludos, ya terminé mi pequeño video-curso introductorio de HTML5 y CSS3 :) así que decidí ponerme a prueba haciendo mi propio sitio,

En el tutorial aprendí a utilizar el cambio de tamaño para dar un efecto de animación muy bonito, ahora, en lo estudiado se logra al pasar el ratón sobre el área de cada artículo (hover), pero lo que quiero es tener una lista en un panel a la izquierda donde al pasar sobre cada título aparezca del lado derecho el contenido, espero haberme explicado suficientemente bien, de todas maneras estoy tratando de averiguarlo por mi parte, gracias por sus respuestas. :)

El código estudiado en el tutorial fue el siguiente:

section article{
height: 60px;
overflow: hidden;
transition:height 2s;
-webkit-transition:height 2s;
-moz-transition:height 2s;
-o-transition:height 2s;
-ms-transition:height 2s;
outline: none;
}
section article.clase1:focus{
height: 800px
}
section article.clase2:focus{
height: 500px
  #2 (permalink)  
Antiguo 04/09/2013, 08:51
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 2 meses
Puntos: 578
Respuesta: Cómo hacer en CSS3 que un hover sobre un texto muestre un artículo en otr

Con solo css únicamente puedes cambiar las propiedades de los objetos ya existentes, sin interactuar con otros. Puedes crear ese apartado y ponerle un estilo inicial y luego con javascript utilizando el evento onmouseover, que vendría a ser lo mismo que un hover, le das el estilo que quieras, en este caso el efecto que cambiara la visibilidad. Si esto ya lo has entendido podemos continuar
  #3 (permalink)  
Antiguo 04/09/2013, 09:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Cómo hacer en CSS3 que un hover sobre un texto muestre un artículo en otr

Puedes usar selectores como ~ y + para aplicar estilos a otros elementos, pero estos deberían de ser hermanos o descendientes de hermanos. Es sobre todo muy útil a la hora de estilizar formularios, con labels, elementos marcados, etc.

Seguramente la mejor opción que vas a tener es usar JavaScript, debido a la limitación de esos selectores. El problema en CSS es que no existen selectores ascendentes.
  #4 (permalink)  
Antiguo 04/09/2013, 09:12
Avatar de infoholico  
Fecha de Ingreso: agosto-2013
Ubicación: Venezuela
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Cómo hacer en CSS3 que un hover sobre un texto muestre un artículo en otr

Gracias por tu rápida respuesta :)

:( creo que entonces lo dejaré para después, el curso no contemplaba javascript, entonces haré algo más sencillo y luego le agrego JS

Etiquetas: contenido, css3, hover, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:15.