Hover over a building floor in HTML/CSS

Question

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.

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);;
  }


HTML

user_2015909 · Answer

Best way seems to implement your building image as an SVG file with overlays. This way you can use CSS selectors and have much more control over your layouts. You can use inside SVG, javascript, etc.

I took your image and loaded it in Draw SVG to create the required top floor . After having saved the DrawSVG drawing locally I simply copied the 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.

You can insert this SVG into you html as if it were an , it is just another tag (with benefits).

UPDATE

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 with some demo text on :hover (top floor again).

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).

Explanation of the math can be found in other answers I gave on SO:

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 } }

Hover over a building floor in HTML/CSS

1 Answers