将鼠标悬停在另一个文本上时如何显示文本？

Question

我试图在将鼠标悬停在另一个文本上时显示一个文本，但它不起作用。我按照另一个类似问题的每个步骤进行操作，但仍然无法正常工作

代码：

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

我的目标是当.dot-mada悬停时，显示.text-mada

PS: 我是初学者，所以这对你们来说可能是个愚蠢的问题，哈哈

Answer 1

将要显示的 div 保留在可见 div

下方

Answer 2

您可以使用此示例中的代码：

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 3

如果 .text-mada 在 .dot-mada 内，那么解决方案如下所示

.text-mada {
    display: none;
}

.dot-mada:hover > .text-mada {
    display: block;
}

<div class="dot-mada">
    Foo
    <span class="text-mada">Bar</span>
</div>

如果他们是兄弟姐妹：

.text-mada {
    display: none;
}

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

<span class="dot-mada">Foo</span>
<span class="text-mada">Bar</span>

将鼠标悬停在另一个文本上时如何显示文本？

How do I display a text when hovering on another text?

html

css

hover