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.
2 respuestas
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)
}
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>
-
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
-
a
, o sea, a todos los enlaces.<a class="gastro_ranking" href="PAGINA_A_LA_QUE_QUIERES_IR">
y en el cssa.gastro_ranking {...estilos...}