悬停时使用 CSS 选择器"+"组合器显示 div

Question

我正在尝试使用" " combinater在悬停上显示一个div，但它不起作用。这是我的代码：

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/

谢谢！

Answer 1

您的HTML结构不适用于 Anchor 和div p >将文本切换到 span 中，因此它们包装：

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

另外，我将考虑使用不依赖ID字段的更广泛的CSS，例如：

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

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

Answer 2

您需要更改标记，以将其显示为相邻的选择器喜欢

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

" "（加上符号）CSS选择器的意思是什么？

JSFIDDLE

---

这是小提琴使用JavaScript