CODEWITHSUNDEEP
htmlcsshover
Ahmed Tariq Muhamed
Ahmed Tariq Muhamed

Reputation: 39

Show hide content text hover in css/html

I have problem in html/css

I got some texts like

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

I want to show hey test only and hide hey2test hey3test hey4test hey5test. and, they're specified with a title of hey2 hey3 hey4 hey5

Like,

hey-1title
hey test

will show only.

rest won,t but only titles

and when i move my mouse to one of the other title hey test disappears and hey2test will show ( if i moved my mouse to hey-2title.

and same with the rest.

Upvotes: 0

Views: 7966

Answers (4)

roshan
roshan

Reputation: 160

Try this

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

Upvotes: 2

Seazoux
Seazoux

Reputation: 631

You can try this: (You have to put test1 and later test1Hover (you can't separate it)):

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

Demo: http://jsfiddle.net/hGp7P/1/

Upvotes: 0

krutssss
krutssss

Reputation: 964

Please see this demo

Here you can see child menu when you hover on parent menu.

Upvotes: 0

Emily
Emily

Reputation: 75

You can use some like 

.hey1:hover{
 display:none;
}

or an jquery slider up and down function

Upvotes: 0

Related Questions