0

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

只会显示。

休息不会，但只有头衔

当我将鼠标移动到另一个标题时，嘿测试会消失，并且会显示 hey2test（如果我将鼠标移动到 hey-2title.

和其他人一样。

4

4 回答 4

2

尝试这个

<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>
于 2013-07-06T13:14:38.457 回答
0

请看这个演示

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

于 2013-07-06T12:49:10.780 回答
0

你可以试试这个：（你必须把 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/

于 2013-07-06T13:03:47.717 回答
0

你可以使用一些像

.hey1:hover{
 display:none;
}

或 jquery 滑块上下功能

于 2013-07-06T12:40:06.527 回答