Display div on hover with CSS selector "+" combinater

Question

I am trying to get a div to show on hover using the "+" combinater and it's not working. Here is my code:

HTML

<div class="about-team">
<div class="client">
    <div class="about-team-left">   <a href="#"><img src="http://placehold.it/150x150"></a>

    </div>
    <div class="about-team-right">
        <p>Just writing a quick note to tell you how very happy we are with our new addition to our family... Our "Molly" is such an adorable puppy... <a id="rm">READ MORE</a>
        </p>
    </div>
    <div class="readmore1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, qui est quo consequuntur esse iure tempora. Hic tenetur nemo repudiandae quae unde sed aliquid deleniti ad! Facilis, reprehenderit culpa mollitia.</div>

CSS

.readmore1 {
display: none;
}

#rm:hover + .readmore1 {
display: block;
height: 100px;
width: 200px;
}

JSfiddle:

http://jsfiddle.net/9zDEp/3/

Thanks!

That's because they're not siblings. Either change your markup or use JavaScript to achieve that. — Hashem Qolami, Feb 01 '14 at 18:28

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

You need to change markup to show them as adjacent selectors like

<div class="about-team-right">Just writing a quick note to tell you how very happy we are with our new addition to our family... Our "Molly" is such an adorable puppy... </div>
   <a id="rm">READ MORE</a>
   <div class="readmore1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, qui est quo consequuntur esse iure tempora. Hic tenetur nemo repudiandae quae unde sed aliquid deleniti ad! Facilis, reprehenderit culpa mollitia.</div>
</div>

What does the “+” (plus sign) CSS selector mean?

JSFiddle

Here is an fiddle another approach using Javascript

edited May 23 '17 at 11:49

Community

1
1

answered Feb 01 '14 at 18:31

Praveen

55,303
33
133
164

You didn't close the first div :) – Hashem Qolami Feb 01 '14 at 18:33
I noticed that you and the other response both removed the
tag. I noticed that if I just put
inside the
after the READ MORE it will not work...
– YKB Feb 01 '14 at 19:16
@YKB because it is not possible to have `div` tag within `p`. That is the only reason. – Praveen Feb 01 '14 at 19:21
@YKB Here read this question [Why
tag can't contain
tag inside it?](http://stackoverflow.com/q/8397852/1671639) to find out the reason.
– Praveen Feb 01 '14 at 19:24

score 0 · Accepted Answer · answered Feb 01 '14 at 18:46

Your html structure didn't work with the anchor and div inside the p but you can switch the text to be inside a span so they wrap:

<div class="about-team">
<div class="client">
    <div class="about-team-left"> <a href="#">
        <img src="http://placehold.it/150x150" /></a>

    </div>
    <div class="about-team-right"> 
        <span>Just writing a quick note to tell you how very happy we are with our new addition to our family... Our "Molly" is such an adorable puppy...</span>  
        <a id="rm">READ MORE</a>

        <div class="readmore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, qui est quo consequuntur esse iure tempora. Hic tenetur nemo repudiandae quae unde sed aliquid deleniti ad! Facilis, reprehenderit culpa mollitia.</div>
    </div>
</div>

Also, I would consider using a more generalized CSS that doesn't rely on ID fields, like this:

.readmore {
display: none;
}

a:hover + div.readmore {
display: block;
height: 100px;
width: 200px;
}

http://jsfiddle.net/9zDEp/15/

I noticed that you and the other response both removed the
tag. I noticed that if I just put
inside the
after the READ MORE it will not work... — YKB, Feb 01 '14 at 19:08
It looks like the nesting of a div in a p tag is invalid according to HTML standards. Violating this rule, may be why the expected hover did not work. See http://stackoverflow.com/a/4291608/904713 for more details. — AtlasRider, Feb 02 '14 at 18:55

Display div on hover with CSS selector "+" combinater

2 Answers2

JSFiddle