当我将鼠标悬停在地板上时，我试图改变它的颜色。 /image/E26AS.jpg这是我正在尝试执行此操作的图像。
我尝试了这篇文章的答案:How can we draw 3D bulding structure from existing image Jquery,Css?但当我实际上将鼠标悬停在地板上时，它不起作用，只有当我将鼠标悬停在图像底部的随机位置时，它才会显示。
我怎样才能做到这一点，以便当我将鼠标悬停在特定楼层时显示该楼层，以及如何实际实现每个楼层的 map 属性？
这是我的代码(如果有帮助的话):
$(document).ready(function () {
$('map').on('mouseenter', function () {
$('.highlight-4').show();
})
$('map').on('mouseleave', function () {
$('.highlight-4').hide();
})
});.highlight {
z-index: 9999;
display: none;
pointer-events: none;
}
.building {
position: absolute;
margin-left: 11%;
box-shadow: 0 15px 30px rgba(0, 0, 0, .6);;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<img class="highlight highlight-4" src="/static/floor-4.png" alt="">
<img class="highlight highlight-3" src="/static/floor-3.png" alt="">
<img class="highlight highlight-2" src="/static/floor-2.png" alt="">
<img class="highlight highlight-1" src="/static/floor-1.png" alt="">
<img class="highlight highlight-0" src="/static/floor-0.png" alt="">
<img usemap="#image-map" class="building" src="/static/apartments.jpeg" alt="">
<map name="image-map">
<area target="" alt="" title="" href="" coords="1121,326,197,662,191,747,1130,473,1398,664,1387,544"
shape="poly">
</map>最佳答案
最好的方法似乎是使用 <polyline> 将您的建筑图像实现为 SVG 文件。 覆盖。这样您就可以使用 CSS 选择器并更好地控制您的布局。您可以使用<a> SVG、JavaScript 等内部。
我拍了你的图片并将其加载到 Draw SVG创建所需的顶层 <polyline> 。在本地保存 DrawSVG 绘图后，我只需复制 <polyline>到我自己的 SVG 文件中，如您所见，该文件无需任何进一步的 HTML 即可工作，并添加了一些 CSS 来突出显示 :hover .
您可以将此 SVG 插入到 html 中，就像它是 <img> 一样。 ，这只是另一个标签(有好处)。
更新
重新访问了我发布的原始代码并将其替换为全新的代码。该代码现在是一个 HTML 页面，使用带有 OP 图像的 SVG 文件，并显示如何使用 <a>以及 :hover 上的一些演示文本(又是顶层)。
通过在 CSS 中使用数学，HTML 页面也变得“响应式”calc()和@media查询(转到“全页”并调整浏览器大小，还可以使用浏览器开发人员工具、“纵向”和“横向”模式在各种设备上检查页面)。
数学解释可以在我给出的其他答案中找到:
现在您创建其他楼层......
/*
Visit below answers on Stackoverflow for an explanation
of the math used for responsive sizing of elements.
https://stackoverflow.com/a/62033317/2015909
https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body { font-size: 1rem }
[band] { display: flex; flex-flow: column wrap; align-content: center }
[padded="1"], [padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
'Band padding' is only active when 'page padding' is off
*/
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
/* Making sure the image fits in any viewport, either portrait or landscape */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }<body padded="0">
<div id="construction-site" band="padded">
<svg viewbox="0 0 1600 1200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.line { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer }
.polyline { fill : Red ; fill-opacity : 0 }
.floor-text { fill: Black; stroke: none; fill-opacity: 0;
cursor: default; pointer-events: none;
font-weight: bold; font-family: sans-serif;
/* responsive font using y = mx + b */
font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
}
.floor:hover>.line { fill-opacity: .4; stroke-opacity: .8 }
.floor:hover>.floor-text { fill-opacity: .7 }
</style>
<image href="https://i.imgur.com/0i4N0d3.jpg"/>
<a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
<polyline class="line polyline"
points="201.242,678.473 1121.43, 333.16 1370.24,
553.473 1387.74, 668.473 1127.49,
474.098 189.242, 753.473 202.242, 678.973"/>
<line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>
<text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
</a>
</svg>
</div>
</body>关于html - 将鼠标悬停在 HTML/CSS 中的建筑物地板上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62099505/