个人中心
gpt4 book ai didi

html - 将鼠标悬停在 HTML/CSS 中的建筑物地板上

转载 作者：行者123 更新时间：2023-12-01 04:32:40 27 4
gpt4 key购买 nike

当我将鼠标悬停在地板上时，我试图改变它的颜色。 /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/

27 4 0
文章推荐： java - 克隆 ConcurrentHashMap
文章推荐： java - 执行命令/运行程序
文章推荐： kubernetes - "externalTrafficPolicy"设置为 "Local"时无响应
文章推荐： Roku:在观察未使用的变量后取消观察它们是标准做法吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com