如何在图像上绘制点的效果,即在点上悬停时突出显示图像上的元素,并且还需要在图像上显示悬停在不同点后与元素连接的线条。enter image description here
qlfbtfca1#
.dome { background: url(https://www.zdnet.com/a/img/resize/ba1b1ab92085d777ab5e313b34c66a94b7aa1236/2023/06/05/79a43eb8-ce38-488c-8cc0-e04699aaca7f/bing.jpg?auto=webp&width=1280); background-repeat: no-repeat; background-position: center; background-size: cover; height: 200px; width: 200px; margin: 0 auto; } .dome > .dome-icon { width: 50px; height: 50px; border-radius: 50%; /* overflow: hidden;*/ position: relative; cursor: pointer; animation: pulses 2s infinite; } .dome > .dome-icon > img { width: 100%; height: 100%; border-radius: 50%; z-index: 1; position: inherit; transition: .5s; } .dome > .dome-icon:hover > img { scale: 1.2; } .dome > .dome-icon:hover:after{ opacity: 1; width: 210px; } .dome > .dome-icon:after { content: ''; position: absolute; height: 2px; background: #ffd503; opacity: 0; } .dome > .dome-icon:nth-child(1):after, .dome > .dome-icon:nth-child(2):after{ left: 42px; } .dome > .dome-icon:nth-child(1) { transform: translate(-113px, 61px); } .dome > .dome-icon:nth-child(2) { transform: translate(-120px, 132px); } .dome > .dome-icon:nth-child(1):after { top: 50%; } .dome > .dome-icon:nth-child(2):after { rotate: -10deg; top: 0; }
<div class="dome"> <div class="dome-icon"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"></div> <div class="dome-icon"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"></div> </div>
ffscu2ro2#
第一件事是通过在Map中使用区域标签在图像上添加坐标。area标签定义了一张图片map内部的区域。Area元素始终嵌套在map标签中。访问链接:area如果你对这个解决方案不满意,那么第二个选择是使用css中的transform,并添加一些js以获得适当的解决方案。如果你需要这样的东西,也要澄清一下:video link
2条答案
按热度按时间qlfbtfca1#
ffscu2ro2#
第一件事是通过在Map中使用区域标签在图像上添加坐标。area标签定义了一张图片map内部的区域。Area元素始终嵌套在map标签中。访问链接:area
如果你对这个解决方案不满意,那么第二个选择是使用css中的transform,并添加一些js以获得适当的解决方案。如果你需要这样的东西,也要澄清一下:video link