4

Me han facilitado este código en otra pregunta que he hecho el código hace exactamente lo que yo quiero, que es que al pasar el ratón por encima me muestre un iframe. Pero al ponerlo en mi web hecha con Adobe Muse el código muestra errores. Adjunto imagen que muestra el error debajo del código que me han proporcionado. código css y html

código en caja

Imagen del error

6
  • 1
    ¿Qué errores de código? En las imágenes que has puesto no se ve nada de eso
    – user7176
    el 6 jun. 2016 a las 11:22
  • La imagen va en el pie de la web como se ve en la segunda imagen. La idea no es que se replique por toda la home de la web, aparte de que me borra incluso el contenido que había. el 7 jun. 2016 a las 5:41
  • 1
    pero eso no son errores de código, pensaba que te decía que la propiedad no era valida o algo así. El CSS que tienes hace lo que se espera ya que le has puesto una imagen de fondo en la etiqueta a, o sea, a todos los enlaces.
    – user7176
    el 7 jun. 2016 a las 6:11
  • Gracias por el comentario, probablemente sea eso, que detecta que todos los "a" tienen esa propiedad y entonces lo aplica y la web se va al garete. el 7 jun. 2016 a las 6:46
  • 1
    seguramente, pon una clase al enlace que quieres ponerle la imagen, por ejemplo: <a class="gastro_ranking" href="PAGINA_A_LA_QUE_QUIERES_IR"> y en el css a.gastro_ranking {...estilos...}
    – user7176
    el 7 jun. 2016 a las 6:51

2 respuestas 2

3

En el CSS se está aplicando el estilo a todos los enlaces de la página, para que solo afecte al enlace que quieres hay que darle una clase.

HTML

<a href="PAGINA_A_LA_QUE_QUIERES_IR" class="gastro_ranking">
  <iframe src="http://lorempixel.com/300/300/people"></iframe>
</a>

CSS

a.gastro_ranking{
    display:inline-block;
    width:142px;
    height:29px;
    background-image:url(ruta de imagen)
}
0
1

Parece que hay un conflicto en el CSS y, aunque tienes puesto que el iframe esté escondido en estado normal, se está mostrando. Eso puede ser porque haya una regla CSS más específica que la que tienes definida.

Puedes hacer click sobre el iframe con el botón secundario del ratón e inspeccionar el elemento. Entonces podrás ver los estilos que se aplican (o no) a dicho elemento, y crear una regla más específica que la que tienes arriba.

Otra posible solución sería utilizar !important y hacer que tus estilos se apliquen con mayor prioridad que los otros. Aunque quizás no lo más recomendable porque hace el código más difícil de mantener después de un tiempo, y si los otros estilos también tienen !important entonces no habrá cambio alguno.

El código quedaría así:

a {
  display:inline-block;
  width:300px;
  height:300px;
  background-image:url(http://lorempixel.com/300/300/cats);
}

a > iframe {
  display:none !important;
  width:300px;
  height:300px;
  margin:0;
  padding:0;
  border:0;
}

a:hover > iframe {
  display:block !important;
}
<a href="PAGINA_A_LA_QUE_QUIERES_IR">
  <iframe src="http://lorempixel.com/300/300/people"></iframe>
</a>

2
  • Gracias @AlvaroMontoro por la paciencia con este tema. Pero me sigue sin funcionar. Seguramente sea problema del programa. Ya que este código en navegador funciona muy bien. Pero en la caja que Muse me proporciona para pegar código no va. =( el 7 jun. 2016 a las 5:44
  • Al final era más simple que todo eso :)
    – Alvaro Montoro
    el 7 jun. 2016 a las 13:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.