Question

我目前正在圈子中转，希望有人可以提供帮助。我曾尝试将此帖子用作reference，但无法使其正常工作。

我有一张图片，其效果是，当您将鼠标悬停在图片的某个部分时，特定部分就会出现并且可以单击。由于这将出现在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>

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

1 个答案: