I have provided this code in another question that I have done the code does exactly what I want, which is that when I mouse over it shows me an iframe. But when I put it on my website made with Adobe Muse the code shows errors. I attach an image that shows the error below the code that you have given me.
In the CSS, the style is applied to all the links on the page, so that only the link you want to give a class affects.
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)
}
It seems that there is a conflict in the CSS and, although you have since the iframe is hidden in normal state, it is showing. That may be because there is a CSS rule more specific than the one you have defined.
You can click on iframe with the secondary mouse button and inspect the element. Then you can see the styles that apply (or not) to that element, and create a more specific rule than the one you have above.
Another possible solution would be to use !important and make your styles apply with higher priority than the others. Although perhaps not recommended because it makes the code more difficult to maintain after a while, and if the other styles also have !important then there will be no change.
The code would look like this:
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>