HTML/CSS: Maintain Hover-Over Pop Up Boxes in Position Until Another Element is Hovered Over

Seeking HTML code to maintain a hover-over pop-up box in position on an image map until another section of the image map is hovered over.

For example, refer to my code below - when hovering over a country on the map, a pop-up box with information about a musician from that country appears. What I need is a way to keep that box visible until another country is hovered over, utilizing only HTML.

Thank you

HTML

<body>

<div class="wrapper" id="wrapper">
<div class="americassoundmap" id="americassoundmap"> 
<div class="americassoundmap_image" id="americassoundmap_image">    
  <img src="http://41.media.tumblr.com/d8e8b561f67d2a68c2675b6e1baadb5f/tumblr_no76qlm55E1tyc2lxo1_1280.png" alt="americassoundmap_map" usemap="#americassoundmap_map">



  <!--start map-->
  <map name="americassoundmap_map">

    <!--start america-->
    <span class="drop_america">
      <span><!-- unnested unnamed span -->
        <div class="america_drop" id="america_drop">
          <area shape="rect" coords="251,195,526,320" alt="america">

                <!--begin john williams-->

          <a href="./williams.php">
            <img src="http://www.jw-collection.de/images/jw9.jpg" width="100" height="100"/>
          </a>
              <iframe width="145" height="100" src="https://www.youtube.com/embed/gT_DXHYPy4I" frameborder="0" allowfullscreen></iframe>
          <!-- begin biotext john_williams -->
            <div class="biotext_john_williams" id="biotext_john_williams">
                <br/><h4><center>John Williams: Overture to <i>The Cowboys</i></center></h4>
            </div>
          <!-- end .biotext-john_williams -->

                <!--end john williams-->

                <!--begin leonard bernstein-->

          <a href="./bernstein.php">
            <img src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/mte4mdazndewndu0mdg3mtgy.jpg"
            width="100" height="100"/>
          </a>
               <iframe width="145" height="100" src="https://www.youtube.com/embed/9tjsKzhpSwE" frameborder="0" allowfullscreen></iframe>
          <!--begin biotext leonard_bernstein-->
            <div class="biotext_leonard_bernstein" id="biotext_leonard_bernstein">
                <br/><h4><center>Bernstein: Three Meditations from <i>Mass</i></center></h4>
            </div>
          <!--end buotext leonard_bernstein>

                <!--end leonard bernstein-->

        </div><!-- end .america_drop -->
      </span><!-- end unnested unnamed span -->
    </span><!-- end .drop_america -->
    <!-- end america -->

    <!--start mexico-->
    <span class="drop_mexico" title="mexico_drop">
      <span><!--unnested unnamed span-->
        <div class="mexico_drop" id="mexico_drop">
            <area shape="rect" coords="296,300,530,435" alt="mexico">

                <!--begin jose pablo moncayo-->
          <a href="./moncayo.php">
              <img src="http://noticias.starmedia.com/imagenes/2013/06/moncayo-300x300.jpg" width="100" height="100"/>
          </a>
                <iframe width="145" height="100" src="https://www.youtube.com/embed/5HAmrz3-ehI" frameborder="0" allowfullscreen></iframe>
          <!--begin biotext jose_pablo_moncayo-->
            <div class="biotext_jose_pablo_moncayo" id="biotext_jose_pablo_moncayo">
                <br/><h4><center>Moncayo: <i>Huapango</i></center></h4>
            </div>
          <!--end biotext jose_pablo_moncayo-->
                <!--end jose pablo moncayo-->
        </div>
      </span>
    </span>
    <!--end mexico-->

    <!--start canada-->
  <span class="drop_canada" title="canada_drop">
      <span><!-- unnested unnamed span -->
        <div class="canada_drop" id="canada_drop">
          <area shape="rect" coords="165,75,620,205" alt="canada">
          <a href="./kulesha.php">
            <img src="http://www.kulesha.com/DSC_0139a.jpg" width="100" height="100"/>
            <iframe width="145" height="100" src="https://www.youtube.com/embed/3cBgQsvPSnk" frameborder="0" allowfullscreen></iframe>
          </a>
          <!-- begin biotext gary_kulesha -->
          <div class="biotext_gary_kulesha" id="biotext_gary_kulesha">
            <br/><h4><center>Gary Kulesha: <i>Torque</i></center></h4>
          </div>
          <!-- end biotext gary_kulesha -->
        </div><!-- end .canada_drop -->
      </span><!-- end unnested unnamed span -->
    </span><!-- end .drop_canada -->
    <!--end canada-->

    <!--start argentina-->
    <span class="drop_argentina" title="argentina_drop">
      <span><!-- unnested unnamed span -->
        <div class="argentina_drop" id="argentina_drop">
          <area shape="rect" coords="555,640,625,835" alt="argentina">
          <a href="./piazzola.php">
            <img src="http://www.longbeachopera.org/uploads/images/2012/astor-piazzolla-400-400.jpg" width="100" height="100"/>
            <iframe width="145" height="100" src="https://www.youtube.com/embed/H_-cfWEMDrU" frameborder="0" allowfullscreen></iframe>
          </a>
          <!-- begin biotext astor piazzola -->
          <div class="biotext_astor_piazzola" id="biotext_astor_piazzola">
            <br/><h4><center>Piazzola: <i>Libertango</i></center></h4>
          </div>
          <!-- end .biotext-aastor_piazzola -->
        </div><!-- end .argentina_drop -->
      </span><!-- end unnested unnamed span -->
    </span><!-- end .drop_argentina -->
    <!-- end argentina -->


  </map>
  <!-- end map -->

  </div>
  <!-- end .americassoundmap_image -->
  </div>
  <!-- end .americassoundmap -->
  </div>
  <!-- end .wrapper -->
  </body>

CSS

  /*/CSS TEXT FILE FOR MAP/*/

  body {
  line-height: .15em;
}
h1{
font-size: 2em;
}
h2{ 
font-size: 1em;
}
h3{
font-size: .9em;
}
h4{
font-size: .7em;
}
h5{
font-size: .5em;
}
h6{
font-size: .45em;
}

/*BEGIN AMERICA*/

span.drop_america {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_america:hover {
text-decoration: none;
background: #ffffff;
z-index: 1;
}
span.drop_america span {
position: absolute;
left: -9999em;
margin: .2em 0 0 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: .1em;
z-index: 1;
}
span.drop_america:hover span {
left: 2%;
background: #ffffff;
} 
span.drop_america span {
position: absolute;
left: -9999px;
margin: .1em 0em 0em 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: .1em;
}
span.drop_america:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 1;
}

/*END AMERICA*/

/*BEGIN MEXICO*/

span.drop_mexico {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_mexico:hover {
text-decoration: none;
background: #ffffff;
z-index: 2;
}
span.drop_mexico span {
position: absolute;
left: -9999em;
margin: .2em 0 0 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: .1em;
z-index: 2;
}
span.drop_mexico:hover span {
left: 2%;
background: #ffffff;
} 
span.drop_mexico span {
position: absolute;
left: -9999px;
margin: .1em 0em 0em 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: .1em;
}
span.drop_mexico:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 2;
}

/*END MEXICO*/

/*BEGIN CANADA*/

span.drop_canada {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_canada:hover {
text-decoration: none;
background: #ffffff;
z-index: 3;
}
span.drop_canada span {
position: absolute;
left: -9999em;
margin: .2em 0 0 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: 1em;
z-index: 3;
}
span.drop_canada:hover span {
left: 2%;
background: #ffffff;
} 
span.drop_canada span {
position: absolute;
left: -9999px;
margin: .1em 0em 0em 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: .1em;
}
span.drop_canada:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 3;
}

/*END CANADA*/

/*BEGIN ARGENTINA*/

span.drop_argentina {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_argentina:hover {
text-decoration: none;
background: #ffffff;
z-index: 4;
}
span.drop_argentina span {
position: absolute;
left: -9999em;
margin: .2em 0 0 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: 1em;
z-index: 4;
}
span.drop_argentina:hover span {
left: 2%;
background: #ffffff;
} 
span.drop_argentina span {
position: absolute;
left: -9999px;
margin: .1em 0em 0em 0em;
padding: .1em .1em .1em .1em;
border-style: solid;
border-color: black;
border-width: .1em;
}
span.drop_argentina:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 4;
}

/*END ARGENTINA*/
htmlcss

Answer №1

Implement a JavaScript function using onMouseOver to close any existing pop-up boxes before opening the current one.

This will create a seamless transition where each new box replaces the previous one without leaving any lingering windows open.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revamp the website to create a more streamlined and compact version that mirrors the functionality of the desktop website

My goal is to make my website responsive on all mobile devices. I want the mobile version to look exactly like the desktop version, just smaller in size. I attempted using transform but it didn't have the desired effect. I aim to achieve the same con ...

htmlcss

having trouble retrieving information from the input field

I'm having trouble retrieving the user's input from the input field, can someone assist me with this issue? I can't seem to identify what the problem is here. var ftemp = document.getElementById("Farenheit").value; <td> <i ...

javascripthtml

What could be causing the bottom of a vertical scroll bar to be cropped in Internet Explorer 11?

I am experiencing an unusual problem in IE11 where the content at the bottom of my page is being cut off along with the scroll bar that should allow for viewing that content. I have managed to resolve this issue in Chrome, Firefox, and Edge but I cannot se ...

htmlcssflexboxinternet-explorer-11

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

Is there a way to disregard inherited styles without relying on the use of "!important"?

Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...

htmlcss

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

I'm feeling frustrated as I try to work with Zurb Foundation sections. I've updated to the latest version 4.3.1. Following the documentation provided here: but encountering strange behavior while navigating through results. Refer to the screen ...

javascripthtmlcsszurb-foundation

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

cssselenium

Arranging icons at the bottom of the post with a text box that changes dynamically

My challenge is that when the content in a box overflows, the box size increases and pushes the icons out of place. I want to ensure that the icons remain in a fixed position. This is how it currently looks: The comment, delete, and likes count end up on ...

javascriptjqueryhtmlcss

A Guide to Configuring jQuery UI Slider with Three Distinct Colors

I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...

jquerycssjquery-ui-slider

Struggling to retrieve data from the HTML Dom? I have already tried using getAttribute() and getText() methods within Selenium WebDriver

I attempted to extract text/value from the Html Dom using getAttribute() and getText() methods in WebDriver, but I wasn't able to retrieve any values in the console. Could someone please assist me in resolving this issue? The image provided does not c ...

javahtmlselenium-webdriverdomtestng

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

javascriptjqueryhtml

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

Issue with Jquery's dotdotdot.js plugin when handling text containing HTML components is causing malfunction

For my current project, I have incorporated dotdotdot.js to handle text truncation. However, after integrating a rich-text editor (tinymce), some HTML elements like p, a, b, i, etc., have been added to the text. Unfortunately, dotdotdot is now not behaving ...

jqueryhtmlellipsisdotdotdot

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

In the code snippet below, I have set up the useState hook so that when a ListItem is clicked on, the selected state becomes true. My goal is to apply specific styling when an item is selected using the sx prop instead of creating a styled component for su ...

javascriptcssreactjsmaterial-uifrontend

Viewing at full width on mobile exceeds 100% [React]

I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...

htmlcssreactjsmobile

Tips for optimizing iframe loading times using the onload event

I am facing an issue with the timing of iframe loading while using a list of URLs as sources. I have created a child iframe and appended it to the DOM, then run the onload function for further processing. However, the time recorded for each iframe seems in ...

javascripthtmlwebside-channel-attacks

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

cssclasshtml-liststargeting

Identifying the length of a division element following its addition

I'm facing difficulties in detecting the length and index of the dynamically appended div. I have researched extensively and found a solution involving MutationObservers, but I am unsure if it is necessary for this particular issue. Let's focus ...

javascriptjqueryhtml

"Triggering an event after selecting and opening a file with an input of type file

Check out this snippet of HTML code: <input type="file" id="mysignature_upload" onChange="readURL();"/> We also have some Javascript code: function readURL(){ alert("Hello"); } A potential issue with this code is that the function readURL is on ...

javascriptjquerycsshtml