Display a text box upon hovering over a designated div

After my previous attempt to change a div's background image when hovering on it (Change div Background Image when hovering on another div), I am now exploring the idea of adding a box that appears when hovering over each div representing a continent. Following a similar approach as suggested by @itodd in their response to the previous post, but encountering some issues with this new implementation.

h1 {
  font-size: 25px;
  font-weight: 200;
}

.container {
  width: 1030px;
  margin: left;
}

.hlinkHomeAmer,
.hlinkHomeEmea,
.hlinkHomeAsia {
  font-size: 10px;
  color: black;
  background-color: antiquewhite;
  visibility: hidden;
}


/* Interactive Map */

.map,
.map-wrapper {
  position: absolute;
  width: 960px;
  height: 540px;
  border: 0px;
}

.map {
  background-image: url(World_Map.jpg);
  z-index: -1;
}


/* div */

.americas,
.americas-wrapper {
  position: absolute;
  width: 364.8px;
...

... (truncated for brevity)

    </div>

  </div>


</div>

htmlcss

Answer №1

To enhance the appearance of your website, you must incorporate the following CSS styles:

.container {
  width: 1030px;
  margin: left;
}

.hlinkHomeAmer,
.hlinkHomeEmea,
.hlinkHomeAsia {
  font-size: 10px;
  color: black;
  background-color: antiquewhite;
  visibility: hidden;
}


/* Interactive Map */

.map,
.map-wrapper {
  position: absolute;
  width: 960px;
  height: 540px;
  border: 0px;
}

.map {
  background-image: url(World_Map.jpg);
  z-index: -1;
}


/* div */

.americas,
.americas-wrapper {
  position: absolute;
  width: 364.8px;
  height: 540px;
}

.emeari,
.emeari-wrapper {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
}

.emeari2 {
  position: absolute;
  width: 297.6px;
  height: 183.6px;
  right: 0px;
}

.ap,
.ap-wrapper {
  position: absolute;
  width: 297.6px;
  height: 356.4px;
  bottom: 0px;
  right: 0px;
}


/* Hover */

.americas-wrapper:hover~.map {
  background-image: url(Americas_Map.jpg);
}

.emeari-wrapper:hover~.map {
  background-image: url(Emeari_Map.jpg);
}

.emeari2-wrapper:hover~.map {
  background-image: url(Emeari_Map.jpg);
}

.ap-wrapper:hover~.map {
  background-image: url(Asia_Map.jpg);
}

.americas:hover .hlinkHomeAmer {
  visibility: visible;
}

.emeari:hover .hlinkHomeEmea {
  visibility: visible;
}

.emeari2:hover .hlinkHomeEmea {
  visibility: visible;
}

.ap:hover .hlinkHomeAsia {
  visibility: visible;
}

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

Transition smoothly between HTML pages by using a script to fade in and out while changing images from an array

I am facing a small issue. I have successfully implemented a fadeIn and fadeOut effect on an entire page by clicking HTML links. However, I now want to dynamically change the images associated with these links using an array. Here is the code for transiti ...

javascriptjqueryhtmlcssarrays

Strange spacing issues in CSS that occur when cropping images

My images have transparent areas at the top and bottom, making the actual content size roughly 350 x 350 px in the center of the png. To display this content with rounded corners, I applied the following CSS code: img { width: 100%; height: 60%; obje ...

htmlcssreactjssassstyled-components

Checking HTML and CSS validation when uploading files in Ruby on Rails

Currently, the project I am working on enables users to upload HTML templates along with CSS, which are then processed by the application for a variety of tasks. While the uploading process is functioning properly, I am in search of a method to validate th ...

htmlcssruby-on-railsvalidation

Obtain meta title and description using JavaScript

I'm having trouble retrieving the meta title and description from websites entered into the URL field. When I input a URL and click fetch, nothing appears. However, when I hardcode "https://www.espn.com/" in the JS function, it pulls in the entire web ...

javascripthtml

Ways to incorporate a background image using CSS

I tried to add a background image using CSS, but unfortunately, I was unsuccessful in my attempts. body { font-family: Arial, Helvetica, sans-serif; } /* .login-form{ width: 400px; } */ /* Full-width input fields */ input[type=text], input[type ...

javahtmlcss

Error message: Expected function in JavaScript runtime when using JQuery and Ajax

I'm relatively new to this and could not find a solution for my issue online. On my asp.net webpage, I have the following script that is causing an error stating that a function is expected. Interestingly, when I use hardcoded values for the city na ...

javascriptjqueryhtmlasp.netajax

What servlet triggered the button press event?

I am generating buttons dynamically. <form action="/" method="post"> <table cellpadding="4"> <% List<Room> rl = (List<Room>) request.getAttribute("roomList"); if(rl != null) { ...

javahtmljspservletsscriptlet

"Is it possible to trigger a JavaScript function within an HTML file from a servlet in Java in order to update the

Is there a way to invoke an HTML JavaScript function from a servlet in Java that will update the content of the HTML page? Could you please provide me with a sample example? I have one server-side servlet that writes data which needs to be updated in ano ...

javajavascripthtmlservlets

Chrome: When enlarging an image, the overflow of the outer div is disrupted

My image wrapper is designed to hide overflow when hovered over. It works well in Firefox and Opera, but Chrome displays it strangely. I've created a 10-second screen recording to demonstrate the issue. Watch it here: I also tested it on JSFiddle, ...

javascriptcssgoogle-chrome

Tips for incorporating three background images within one CSS file

Here's a snippet of my navigation code: <? if($page == ""){ ?> <li> <a href="<? echo $site;?>" id="on" style="background-image:url(images/logonav_onright.png) right no-repeat;">Home</a> </li> ...

phphtmlcss

Can you explain the meaning of "0 0" in the CSS property "flex: 0 0 33%"?

Exploring the world of flex, I came across this interesting line within Bootstrap 4's column classes: .col-md-4 { flex: 0 0 33.3333%; } I am curious about the properties associated with the values 0 0. Could you please shed some light on it? ...

cssflexboxbootstrap-4

Is it possible for me to modify the text in the address bar without leaving the current page?

My client asked me to create a search page, but the challenge is that the actual search functionality is within an iframe, and the user sees a decorative shell around it. The shell passes URL parameters to the iframe, which processes them and carries out t ...

javascripthtmliframe

Missing ghost image appears when you drag and drop the file

New to JavaScript... As a rookie in coding, I often get interesting requests from my partner who is a kindergarten teacher. Recently, she asked me to create a "Function Machine" for her classroom activities. With some trial and error, I managed to put tog ...

javascriptcss

The Select2 choices are not being updated correctly

I am in the process of implementing a feature on my website that allows users to select a Country -> State -> City. The state and city select boxes are initially set to disabled, and when a user chooses a Country, it should display the corresponding ...

javascriptjqueryhtmltwitter-bootstrapselect

Create a table with CSS styling that resembles a measuring scale

I am working on a for loop that will populate a table, similar to the diagram below: https://i.sstatic.net/xbZ8u.png Age is displayed in the first row as a header, followed by three rows with three columns each. The first row contains images, the second ...

htmlcssangular

Is it possible to use a full-width material-ui Button inside a Badge component?

Within a grid, I had initially used fullWidth on a Button to make it expand and fill the container. Everything was functioning correctly until I enclosed the Button in a Badge element. Now, the fullWidth property is not being applied, and the button rever ...

javascriptcssreactjsmaterial-designmaterial-ui

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

I've come across this same question multiple times, but the solutions I've found so far haven't been helpful. My media queries are working perfectly on desktop, but they don't seem to take effect on three different android devices. It&a ...

androidhtmlcssmedia-queries

Looking to position content within a card to the bottom right in Bootstrap 4

Having trouble aligning my text and button within a card to the bottom right. Can't seem to get them to line up correctly. https://i.sstatic.net/OTDwJ.jpg This is what I have in my code: <div class="col-sm-3 text-right my-auto"> <div cl ...

htmlbootstrap-4alignmentvertical-alignment

What is the best way to store objects in files using Node.js?

As I manage my Node server, a question arises - what is the best way to convert objects into a serialized format and save them to a file? ...

javascripthtmlnode.js

Utilizing the value selected in a form to trigger an action method without the use of a query

I am currently utilizing pug to generate pages for my nodeJS server. In this particular case, I am attempting to use the value selected in a form select option to dynamically change the action method. Essentially, the goal is to utilize the group name sel ...

htmlnode.jsformspug