可點擊的圖像出現在懸停上

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>