可点击的图像出现在悬停上

Question

我目前正在圈子中转，希望有人可以提供帮助。 我已经尝试过将这篇文章作为参考 ，但是无法使其正常工作。

我的图像需要具有以下效果：将鼠标悬停在图像的特定部分上时，该特定部分会出现并且可以单击。 由于这将出现在Intranet站点上，并且我将提供代码和图像，因此我希望能以最简单的方式进行操作。

到目前为止，我已经尝试过图像映射，跨度，div和无序列表，每个都有自己的问题，并且搜索越多，我就越困惑。

是使用直接CSS剪切图像并在悬停时显示的最佳方法。

编辑感谢@Nezir我已经在下面编辑了您的代码，但是我似乎无法使图像相互重叠。

 #main { position: relative; top: 0; right: 0; } #innerHover { position: absolute; top: 296px; left: 397px; width: 117px; height: 117px; border-radius: 50%; background: #fff; } #popupdiv { position:absolute; } #innerHover #popupdiv{ display:none; } #innerHover:hover #popupdiv{ position:absolute; display:block; } 

 <div><img id="main" src="Outcomes.png"> <span id="innerHover"> <a ref="web.com.au" alt=""><img id="popupdiv" src="callout.png"/></a> </span> </div> 

Answer 1

请检查以下代码示例：

  #myImage { position: relative; background: #0f0; width: 100px; height:100px; } #innerHover { position: absolute; top: 50%/**distance from top of image */; left:50% /**distance from left of image */; width:10px; /**region width*/; height:10px /**region height*/; overflow:show; background:#fff; } #popupdiv{ position:relative; left:10px; width:60px; height:60px; } #innerHover #popupdiv{ display:none; } #innerHover:hover #popupdiv{ display:block; } 

 <div id="myImage"> <div id="innerHover"><div id="popupdiv"><a target="_blank" href="https://www.rubyonrails.ba/"><img src="https://www.rubyonrails.ba/assets/logo-2f7bac89028bb6a84dcfb8f4c2f895e618937222a560620d00f9cdd2ee1c21e0.png"/> </a> </div></div> </div>