Question

我正在尝试使用“+”组合器在悬停时显示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

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

<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

这是使用Javascript

的fiddle另一种方法

Answer 2

您的html结构无法与 p 中的锚和 div 一起使用，但您可以将文本切换为< strong> 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/

使用CSS选择器“+”组合器在悬停时显示div

2 个答案:

JSFiddle