Show hide content text hover in css/html [duplicate]

Question

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.

Ahmed, when you move the mouse over the revealed div, do you want it to stay visible? And how it should look like? One example: demos.w3avenue.com/cross-browser-pure-css3-vertical-accordion — Stano
– Stano, Commented Jul 6, 2013 at 13:53

roshan · Accepted Answer · 2013-07-06 13:14:38Z

2

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>

answered Jul 6, 2013 at 13:14

roshan

1601 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Seazoux Over a year ago

If you do this, all the text classes will show... :P EDIT: No, I'm wrong, this works perfect :)

roshan Over a year ago

have you tried it.. :D, try it before comment ... there is "+" selector combinator which selects immidiate sibling, so only corresponding title's text div will display...

Seazoux Over a year ago

Yes yes, you have reason... sorry :P

Emily · Accepted Answer · 2013-07-06 12:40:06Z

0

You can use some like

.hey1:hover{
 display:none;
}

or an jquery slider up and down function

answered Jul 6, 2013 at 12:40

Emily

751 silver badge10 bronze badges

1 Comment

Ahmed Tariq Muhamed Over a year ago

Still, did not work. while I'm using <div class="hey1"> in the html for the text i want to use and still, not hidden.

Seazoux · Accepted Answer · 2013-07-06 13:03:47Z

0

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/

answered Jul 6, 2013 at 13:03

Seazoux

6411 gold badge5 silver badges28 bronze badges

Collectives™ on Stack Overflow

Show hide content text hover in css/html [duplicate]

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related