悬停时出现可点击的图像

Question

我目前正在兜圈子，希望有人能提供帮助。我曾尝试将此 post 用作 reference，但无法正常工作。

我有一张图片，当您将鼠标悬停在图片的特定部分时，该特定部分会出现并且可以点击。因为这将出现在内部网站上，我将提供代码和图像，所以我想要最简单的方法。

到目前为止我已经尝试过，图像映射，跨度，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>

悬停时出现可点击的图像

Clickable image appear on hover

html

css

image

imagemap