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

What methods can I employ with JavaScript to catalog data collected from an HTML form?

Currently, my form requires users to input a username that cannot start or end with a period (.). I have implemented some code but I believe there is an issue with the .value[0] parts. //Checking Username if (document.getElementById("uName&quo ...

javascripthtml

Positioning borders in an Outlook table

While experimenting with Mjml, I encountered an issue where I struggled to place the border exactly where it needed to be in order for my table to function correctly. It was a bit of a do-it-yourself solution, but it was the only way I managed to make it w ...

htmlcssoutlookbordermjml

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

Combining AngularJS and FusionCharts in my web application has led to a unique issue. The upcoming release of AngularJS v1.3.0 will require the presence of a <base> tag in the HTML head to resolve all relative links, regardless of the app's loca ...

javascripthtmlangularjsfusioncharts

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7

Instead of displaying the location attribute in an alert, populate it into a text area

I have a function that can retrieve my current location using longitude and latitude coordinates. However, I am looking to automatically fill a text area (Populate Here) with the results instead of displaying an alert. <!DOCTYPE html> <html> ...

javascripthtmlcordova

What is the best way to extract the image tag from HTML code and use it as the image source in Glide for images

I recently came across a method to extract image links from HTML img tags using the Html Java library. It requires using the fromHtml method. After pulling some HTML code from an RSS feed, I wanted to display the images it contained. The code snippet belo ...

javaandroidhtml

Designing a photo frame slider for a unique touch

My skills in javascript and jQuery are limited, but I am looking to create a customizable slider. While exploring options like Flexslider (), I found it challenging to meet the following specifications: Eliminate color gaps between thumbnails Enable thu ...

javascriptjqueryhtmlcssslider

Is there a way to insert a clickable hyperlink in the text of a MessageDialog?

I am currently working on MessageDialog code that looks like this: MessageDialog dlg = new MessageDialog("None of the images you selected contain location information. You can add your own after downloading http://exifpilot.com/"); await dlg.ShowAsync(); ...

c#htmlhyperlinkwindows-store-appsmessagedialog

Troubleshooting the issue: AngularJS not functioning properly with radio button selection to show specific div containing input field

Looking for some help with radio buttons: I need the selection of radio buttons to display their respective input boxes. I have included a snippet of my HTML and controller code below. In my controller, I am using ng-change to call a function that uses jQu ...

javascriptjqueryangularjshtml

Folded Corner Div using only CSS

I've been tirelessly experimenting with countless online methods, but I can't seem to make anything work. There's a div that needs to be flexible in width and height, positioned on a tile-able background image with a 1px border. The challe ...

css

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss

Incorporate a personalized style into the wysihtml5 text editor

Is there a way for me to insert a button that applies a custom class of my choice? I haven't been able to find this feature in the documentation, even though it's a commonly requested one. Here's an example of what I'm looking for: If ...

javascripthtmlwysiwygwysihtml5

Tips for revealing a link after the user clicks on the submit button

I am looking to set up a webpage that will display a hyperlink after the submit button is clicked. For example, 1) wedding 2) engagement 3) birthday All three items are checkbox buttons and there is a textbox to input the budget. After clicking the sub ...

javascripthtmlhyperlink

How can the spacing between Angular Material's mat-card-content and mat-card-actions be adjusted?

I am creating a mat card layout where there are two separate cards within the main card's content section. However, when I add a button for the actions section of the main card, there is no spacing between these two sections. How can I create a vertic ...

htmlcssangularangular-material

What could be causing the issue with Hindi text not displaying properly on Safari?

I'm having trouble with displaying Hindi text on my website. I tried pasting the text in a new file and it worked, so why is it not loading correctly in this case? The Hindi script is within the second span with the class word w2. "use strict"; le ...

javascripthtmlcssbrowsersafari

What is the best way to select and style individual HTML elements using CSS?

Having trouble editing a Validations Form in Ionic 4 with CSS. It seems that only the form elements are targeted after clicking on the form group. Attached below are the form states before and after click. I'm unable to style the form elements before ...

htmlcssangularionic4

How to specify columns when storing data in a CSV file using Scrapy

As I scrape data from the web, I am facing an issue with my csv file where the links column is always displayed as the first column. How can I specify the placement of columns in the csv file? pName = response.css('#search .a-size-medium') ...

htmlcsscsvweb-scrapingscrapy

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss