html - 在 css/html 中显示隐藏内容文本悬停

标签 html css hover

我的 html/css 有问题

我收到了一些类似的短信

hey-1title
hey test
hey-2title
hey2test
hey-3title
hey3test
hey-4title
hey4test
hey-5title
hey5test

我只想显示 hey test 并隐藏 hey2test hey3test hey4test hey5test。并且,它们的标题为 hey2 hey3 hey4 hey5

喜欢,

hey-1title
hey test

只会显示。

休息赢了,但只有头衔

当我将鼠标移动到另一个标题时 hey test 消失并且 hey2test 将显示(如果我将鼠标移动到 hey-2title。

其他的也一样。

最佳答案

试试这个

<html>
    <head>
        <title>Head</title>
<style>
.text{
display:none;
}
.title:hover+.text{display:block}

</style>
    </head>
    <body>
        <div class="title">hey-1title</div>
        <div class="text">hey test</div>
        <div class="title">hey-2title</div>
        <div class="text">hey2 test</div>
        <div class="title">hey-3title</div>
        <div class="text">hey3 test</div>
        <div class="title">hey-4title</div>
        <div class="text">hey4 test</div>
        <div class="title">hey-5title</div>
        <div class="text">hey5 test</div>
    </body>
</html>

关于html - 在 css/html 中显示隐藏内容文本悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17503031/

相关文章:

c# - 在 Web 服务中使用带有外部 CSS 的 HTML 页面中的 iTextSharp 创建 PDF

javascript - 使用 JavaScript 插入 HTML

css - 样式文本框文本

html - 如何在悬停 CSS 上添加图像和更改可见性

php - 如何在Jquery DataTable中添加编辑和打印按钮?

javascript - JavaScript 中的验证码无法正常工作

javascript - 根据窗口宽度添加标题类

php - 位置 :absolute; Making links not work in my div?

html - 如何为 IMG 标签内的图像添加悬停边框?

html - CSS - 只需要在悬停时增加图像大小(而不是文本)