将鼠标悬停在HTML/CSS中的建筑地板上 [英] Hover over a building floor in HTML/CSS
问题描述
当我将鼠标悬停时，我正在尝试更改其颜色. https://imgur.com/a/pXEmNXp 这是我要尝试处理的图像做吧.
I'm trying to change the color of a floor when I hover it. https://imgur.com/a/pXEmNXp this is the image on which I'm trying to do it.
I tried the answer on this post: How can we draw 3D bulding structure from existing image Jquery,Css? but when I actually hover the floor it doesn't work, it only shows when I hover in a random place on the bottom of the image.
如何做到这一点，以便当我将其悬停时可以显示该特定楼层，以及如何实际实现每个楼层的map属性?
How can I do it so it shows that specific floor when I hover it, and how can I actually implement the map attribute for every floor?
这是我的代码，如果有帮助的话:
Here's my code if it helps:
$(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选择器，并更好地控制布局.您可以在SVG，javascript等内部使用<a>.
Best way seems to implement your building image as an SVG file with <polyline> overlays. This way you can use CSS selectors and have much more control over your layouts. You can use <a> inside SVG, javascript, etc.
我拍摄了您的图片，并将其加载到绘制SVG 中，以创建所需的顶层 <polyline>.将DrawSVG绘图保存到本地后，我只需将<polyline>复制到我自己的SVG文件中，就可以看到，该文件无需任何其他HTML即可工作，并添加了一些CSS在:hover上进行突出显示.
I took your image and loaded it in Draw SVG to create the required top floor <polyline>. After having saved the DrawSVG drawing locally I simply copied the <polyline> into my own SVG file, which, as you can see, works without any further HTML and added some CSS to do the highlighting on :hover.
您可以将此SVG插入html中，就像<img>一样，它只是另一个标签(有好处).
You can insert this SVG into you html as if it were and <img>, it is just another tag (with benefits).
更新
重新访问我发布的原始代码，然后将其替换为全新的代码.现在，该代码是一个HTML页面，其中使用带有OPs图像的SVG文件，并显示了如何在:hover(再次位于顶层)上使用<a>和一些演示文本.
Revisited the original code I posted and replaced it with completely new code. The code is now a HTML page using an SVG file with the OPs image and showing how to use an <a> with some demo text on :hover (top floor again).
还通过在CSS calc()和@media查询中使用数学运算使HTML页面具有响应性"(转到整页"并调整浏览器大小，还可以使用浏览器在各种设备上检查该页面)开发人员工具，纵向"和横向"模式.
The HTML page has also been made 'responsive' by using math in CSS calc() and @media queries (go 'full-page' and resize browser, also check the page on various devices with the browser Developer Tools, 'portrait' and 'landscape' mode).
可以在我对SO给出的其他答案中找到数学解释:
Explanation of the math can be found in other answers I gave on SO:
- SO 62033317
- SO 61867702
现在您创建其他楼层....
Now you create the other floors....
/*
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/CSS中的建筑地板上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
