Home / Questions / 12964
Accepted
Marc Lemien
Asked: 2020-06-07 01:09:49 +0800 CST 2020-06-07 01:09:49 +0800 CST

Error in css property with background-image:url

  • 772

This code has been provided to me in another question that I have asked. The code does exactly what I want, which is that when I hover over it, it shows me an iframe. But when I put it on my website made with Adobe Muse the code shows errors. I am attaching an image that shows the error below the code that I have been provided. css and html code

code in box

bug image

html

2 Answers

  1. Best Answer

    In the CSS, the style is being applied to all the links on the page, so that it only affects the link you want, you have to give it a class.

    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)
}
    • 3

  2. It seems that there is a conflict in the CSS and, although you have since the iframeis hidden in normal state, it is showing. That may be because there is a more specific CSS rule than the one you have defined.

    You can click on it iframewith the right mouse button and inspect the element. You will then be able to see the styles that are applied (or not) to that element, and create a more specific rule than the one you have above.

    Another possible solution would be to use !importantand make your styles apply with a higher priority than the others. Although perhaps not the most recommended because it makes the code more difficult to maintain after a while, and if the other styles also have !importantthen 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>

    • 1