Question

我在html / css中有问题

我收到了一些像

这样的文字

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

我想只显示嘿测试并隐藏hey2test hey3test hey4test hey5test。并且，它们被标记为hey2 hey3 hey4 hey5

像，

hey-1title
hey test

仅显示。

休息赢了，但只有标题

当我将鼠标移动到另一个标题时嘿测试消失，hey2test将显示（如果我将鼠标移动到嘿-2标题。

和其他人一样。

Answer 1

试试这个

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

Answer 2

您可以使用

之类的内容

.hey1:hover{
 display:none;
}

或jquery滑块上下功能

Answer 3

请参阅此demo

当您将鼠标悬停在父菜单上时，可以看到子菜单。

Answer 4

你可以试试这个:(你必须把test1和更高版本的test1Hover（你不能把它分开））：

<强> HTML

<div id="test1">Test 1</div>
<div id="test1Hover">Test 1 Hover</div>
<div id="test2">Test 2</div>
<div id="test2Hover">Test 2 Hover</div>
<div id="test3">Test 3</div>
<div id="test3Hover">Test 3 Hover</div>

<强> CSS

    #test1Hover{
        display:none;
    }
    #test2Hover{
        display:none;
    }
    #test3Hover{
        display:none;
    }

#test1:hover + #test1Hover{
    display: block;
}

#test2:hover + #test2Hover{
    display: block;
}

#test3:hover + #test3Hover{
    display: block;
}

演示：http://jsfiddle.net/hGp7P/1/

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

4 个答案: