Question

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

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

  #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的直接兄弟

Answer 2

您需要adjacent siblings selectors：

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

Demo

Answer 3

请将代码添加到问题正文中。无论如何，你写了这个：

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

这将使#link内的<img id="image">可见。由于图像内部没有链接，因此没有任何意义。链接是图像的直接兄弟，所以你可以这样做：

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

Answer 4

而不是这个

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

像这样使用..

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

为什么img：hover在这里不起作用？

4 个答案:

Demo