html - 为什么img :hover doesn't work here?

Question

我通过设置 visibility:hidden 来隐藏 anchor 。
在图像悬停时，我将 anchor 可见性设置为 visible，但 anchor 不会出现在图像悬停时。

不确定代码段中出了什么问题。

  #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>

应用适当的选择器后，可见性问题得到解决。但是现在，当我将鼠标悬停在链接上时，它开始闪烁。有什么提示吗？

检查片段http://jsbin.com/yiqek/3/edit

Answer 1

#link 是 #image 的相邻兄弟，因此您需要编写

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

+ 是相邻兄弟选择器

A + B 匹配 B 是 A

的直接兄弟