全部
我试图在网上找到这个但不知道从哪里开始,任何建议都很好,我正在尝试为我们的网站构建一个交互式页面“如何使用”,基本上这个页面将只是一个图像的主页,所以当鼠标悬停在这张图片的某个部分时,会显示一个弹出文本来解释这是什么?
我找到了将鼠标悬停在图片上时弹出文本的方法,但它是整个图片而不是其中的某个部分,有什么想法或者这是不可能的吗?
干杯
最佳答案
您需要使用 SVG Imagemap。只是一个例子。这个网站也应该有帮助。 Online Image Map
body {
font-family: Avenir, Helvetica, sans-serif;
}
#lynskey circle,
#lynskey polygon {
fill: none;
pointer-events: all;
}
#lynskey text {
opacity: 0;
transition: .3s;
font-size: 24px;
}
#lynskey polygon:hover,
#lynskey circle:hover {
cursor: pointer;
}
#lynskey polygon:hover+text,
#lynskey circle:hover+text,
#lynskey circle:focus+text,
#lynskey polygon:focus+text {
opacity: 1;
}
@media all and (max-width: 500px) {
#lynskey text {
font-size: 28px;
}
}
#lynskey {
width: 80%;
margin: 0 auto;
max-width: 1500px;
}
#lynskey svg {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lynskey-med.jpg');
background-size: cover;
}
@media all and (min-width: 750px) {
#lynskey svg {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lynskey-large.jpg');
}
}
<div id="lynskey">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 586">
<title>Lynskey 2015 Backroad Bike Technical Details</title>
<circle cx="770" cy="401" r="172" />
<text x="320" y="570">DTSwiss TK540/X.9 wheelset</text>
<polygon points="256,29 443,29 443,60 357,101 266,65" />
<text x="0" y="120">Selle Italia X1 Flow Saddle</text>
<polygon points="646,133 367,159 245,350 283,409 390,434 413,379 456,370 500,400 677,207 684,229 697,217 669,133" />
<text x="415" y="250">Titanium frame</text>
<circle cx="225" cy="401" r="51" />
<text x="320" y="570">SRAM Apex rear dérailleur</text>
</svg>
</div>
关于java - 图像上弹出文本的 CSS 帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44772407/