-1

I'm trying to display a text when hovering on another text but it is not working. I followed every steps on another similar questions but it is still not working

Code:

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

My goal is that when .dot-mada is hovered, .text-mada is displayed

PS: I'm a begginner so this might be a dumb question for you guys, lol

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
Mitantsoa Rakotomamonjy
  • 3
  • 1
  • 2
    Please show us your HTML. From the CSS I see you are assuming that the text div is immediate sibling of the hovered element. Is it? – A Haworth Nov 03 '21 at 17:09
  • It is `.dot-mada:hover ~ .text-mada {display: block}` you have to use the `~` not the `+` – avia Nov 03 '21 at 17:51

3 Answers3

0

You can use code like in this example:

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>
avia
  • 1,527
  • 7
  • 19
0

If .text-mada is inside .dot-mada, then the solution looks like this

.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 siblings:

.text-mada {
    display: none;
}

.dot-mada:hover + .text-mada {
    display: block;
}
<span class="dot-mada">Foo</span>
<span class="text-mada">Bar</span>
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
-1

keep the div you want to show, below the visible div

Sreehari Avikkal
  • 305
  • 2
  • 15