¿Por qué img: hover no funciona aquí?

I'm hidding an anchor by setting visibility:hidden.
On image hover, I set the anchor visibility to visible, but the anchor doesn't appear on image hover.

Not sure what's going wrong in the snippet.

  #image{
    width :240px;
    height :190px;
  }
  #image:hover #link{
    visibility : visible;
  }
  #link{
    visibility : hidden;
    position: absolute;
    left: 150px;
    top: 170px;
  }

<img id="image" src="images/Goals.jpg" alt="Goals" />
<a href="http://google.com" id="link" target="_blank">Goals Analysis App Link</a>

The visibility issue got resolved once applying appropriate selector. But now, when i hover on the link, it starts flickering. Any hints on this ?

check the snippet http://jsbin.com/yiqek/3/edit

preguntado el 28 de mayo de 14 a las 13:05

4 Respuestas

#link is an adjacent sibling of #image así que tienes que escribir

  #image:hover + #link{
    visibility : visible;
  }

+ is the adjacent sibling selector

A + B cerillas B when is the immediate sibling of A

contestado el 28 de mayo de 14 a las 13:05

It works. But now, when i hover on the link it filckers ! jsbin.com/yiqek/3/edit . Any hint ? - ikiw

of course if you hover the link then #image:hover is no longer applied. You should apply instead the :hover rule to a parent of both the image and the link: e.g. jsbin.com/vakusogu/2/edit - Fabricio Calderan

Necesita selectores de hermanos adyacentes para esto:

 #image:hover  + #link{
    visibility : visible;
  }

De demostración

contestado el 28 de mayo de 14 a las 13:05

please add the code to the question body as well. Anyways, you wrote this:

#image:hover  #link{
  visibility : visible;
}

Que hará #link dentro de <img id="image"> visible. Since you can have no links inside of an image, this is making no sense. The link is the direct sibling of the image, so you can do this:

#image:hover + #link{
  visibility : visible;
}

contestado el 28 de mayo de 14 a las 13:05

En lugar de esto

#image:hover #link{
visibility : visible;
  }

Úselo así ...

#image:hover + #link{
visibility : visible;
 }

contestado el 28 de mayo de 14 a las 13:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.