Is there a way to show a message when I hover over a different text?

I've been attempting to show a text when hovering over another text, but for some reason it's not working. I've followed all the steps from similar questions, but unfortunately, it still doesn't seem to be functioning correctly.

Here is the code snippet:

.text-mada {
    width: 18%;
    position: relative;
    left: 760px;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: justify;
    padding: 15px;
    
    z-index: 2;
    bottom: 750px;
    display: none;  
}

.dot-mada {
    position: relative;
    text-align: center;
    font-size: 50px;
    left: 52px;
    bottom: 44px;

.dot-mada:hover + .text-mada {display: block}

The objective is that when .dot-mada is hovered over, .text-mada should be displayed

PS: I am new to this so please bear with me, might be a silly question for you guys!

htmlcsshover

Answer №1

Check out this code snippet for a cool effect:

div {
height:100px;width:100px;
background:blue;
margin:20px;
}

span {
display:none;
height:100px;width:100px;
background:pink;
margin:20px;
}

div:hover ~ span {
display:block;
}
<div>text 1</div>
<span>text 2</span>

Answer №2

When .text-mada is contained within .dot-mada, the solution appears as follows:

.text-mada {
    display: none;
}

.dot-mada:hover > .text-mada {
    display: block;
}
<div class="dot-mada">
    Foo
    <span class="text-mada">Bar</span>
</div>

If they are adjacent siblings:

.text-mada {
    display: none;
}

.dot-mada:hover + .text-mada {
    display: block;
}
<span class="dot-mada">Foo</span>
<span class="text-mada">Bar</span>

Answer №3

Ensure that the div you wish to display remains positioned below the div that is currently 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

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

javascriptjqueryhtmljquery-ui

What are the steps to insert a plotly graph into a webpage so that it responds to different

I have been working on integrating a plotly pie chart into my website. In order to make the iframe responsive, I decided to utilize this specific tool to generate the necessary html/css. While the chart appears satisfactory on a laptop screen, it is barely ...

htmlcssiframeplotlyresponsive

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

javascripthtmlcssbutton

What sets the Name Attribute apart from the Name Token in HTML?

I was exploring the safety of using spaces in a name attribute and found varying opinions, with most agreeing that it is safe due to the Name attribute's utilization of CDATA token rather than a Name token. However, I am struggling to grasp the exact ...

htmltoken

What is the method for transforming latitude and longitude coordinates into a physical address for a website?

I'm working with an API that provides latitude and longitude coordinates, and I need to retrieve the address information (city, area, etc.) based on these values. For example, there is a website like where if we enter the IP address of a location, i ...

javascripthtmllatitude-longitude

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in orde ...

javascriptjquerycssnode.jshandlebars.js

Stop the container from wrapping and allow its children to wrap instead

Here is a snapshot of my current layout: <div class="left"> ... </div> <div class="right"> <div class="inner" /> ... several more of these ... <div class="inner" /> </div> My CSS code looks like this: ...

htmlcss

Some elements are not visible when inspecting the source code

Hidden fields are essential in my jsp form. Interestingly, when I check the page source in a browser, only the first hidden field is displayed, not the second one. <input type="hidden" name="url" id="url" value="<%=url%>" /> <input type="hi ...

javahtmljsp

Embracing this web design framework with Rails

Hey there, I am currently trying to integrate a free CSS/HTML/JavaScript template into my Rails project. You can download the template from here. The template consists of an index page, a single CSS file, and two JavaScript files. To implement this templa ...

htmlcssruby-on-railsruby-on-rails-5

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

Tips on avoiding quotation marks in a Less variable containing a color identifier

I'm currently working on an HTML/CSS project where I aim to establish classes for labels and texts based on their color. For instance: .text-red{ color: red; } .label-white{ color: white; } In order to achieve this, my approach involves cr ...

javascripthtmlcssstringless

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

javascripthtmlcss

Pictures are not appearing correctly when utilizing the img-fluid class

Issues occur when I apply the "img-fluid" bootstrap class to my images, as they fail to appear on the page and are set at 0x0 pixels in size upon inspection. This is the HTML code: <div class="col"> <div class="row no-gutters"> &l ...

htmlcssbootstrap-4

What could be preventing certain child elements from rendering in the browser when using scss/ compiled css?

I currently work with the Visual Studio Code editor and execute "npm run sass" in the bash terminal. Whenever I modify the scss file, the terminal displays the following message: => changed: C:\Users\kenne\modern_portfolio\scss&bso ...

htmlcssnpmsass

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Extracting data from a table on the designated URL using Apify and Puppeteer is my current goal: https://en.wikipedia.org/wiki/List_of_hedge_funds The desired outcome should be an array of objects. Each element in the array must represent a <tr> ro ...

javascripthtmlweb-scrapingpuppeteerapify

Animation using CSS that starts with a horizontal slide and transitions into a diagonal slide

Can I create an animation to move a graphic image on an html page from the middle of the screen to the top left corner? Here is what I have so far: #img1 {
 bottom: 50%;
 display: block;
 position: absolute;
 a ...

htmlcsscss-animations

Identifying line breaks caused by browsers or CSS forced line breaks

<p style="width:60px"> This is just a sample text. It is a piece of text that doesn't really say anything meaningful.</p> When this text is rendered as HTML, it would look like this: This is just a sample text. It is a piece of text ...

javascripthtmlcsspdf-generation

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

javacssgwt

The font sizes appear larger when styled with HTML compared to using Photoshop

When I view my <nav> element in Chrome, the font size of each list element appears much larger than it was originally designed in Photoshop. The font is displaying 23px wider in Chrome compared to Photoshop, even though my resolution is set at 72dpi ...

htmlcssphotoshopwebfonts

Tips for creating dynamic rope animations with canvas and CSS3 styling

Interested in creating a canvas animation, or possibly using CSS3 for the same purpose. Looking to add an automatic rope animation, similar to it swaying gently. I've searched for scripts and other solutions, but haven't found anything suitable. ...

htmlipadcsscanvasjquery-animate