文章/答案/技术大牛

发布

社区首页 >问答首页 >在HTML/CSS中悬停在建筑物的地板上

问在HTML/CSS中悬停在建筑物的地板上
EN

Stack Overflow用户

提问于 2020-05-30 07:59:45

回答 1查看 761关注 0票数 3

当我将地板悬停时，我试图改变它的颜色。https://imgur.com/a/pXEmNXp，这是我想要做的图片。

我在这个帖子上尝试了答案：如何从现有的图像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>

jquery

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-30 11:25:17

最好的方法似乎是将您的建筑映像实现为带有<polyline>覆盖的SVG文件。这样，您可以使用CSS选择器，并有更多的控制您的布局。您可以在SVG、javascript等中使用<a>。

我拍摄了您的图像，并将其加载到绘制SVG中，以创建所需的顶层<polyline>。在本地保存了DrawSVG绘图之后，我只需将<polyline>复制到自己的SVG文件中，正如您所看到的，这个文件不需要任何HTML就可以工作，并添加了一些CSS在:hover上进行高亮显示。

您可以将这个SVG插入到您的html中，就像它是一个<img>一样，它只是另一个标记(有好处)。

更新

重新检查了我发布的原始代码，用全新的代码替换了它。代码现在是一个HTML页面，它使用一个带有OPs图像的SVG文件，并展示了如何在<a>上使用:hover上的一些演示文本(再次在顶层)。

通过在CSS calc()和@media查询中使用数学(转到“完整页”并调整浏览器大小，还可以使用浏览器开发工具“纵向”和“横向”模式检查各种设备上的页面)，HTML页面也得到了“响应”。

对数学的解释可以在我给出的其他答案中找到，因此：

现在你创造其他楼层..。

/*
    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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62099505

复制

相似问题

问在HTML/CSS中悬停在建筑物的地板上
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML/CSS中悬停在建筑物的地板上EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML/CSS中悬停在建筑物的地板上
EN