Html 悬停显示Div和隐藏占位符

我试图建立一个圆圈来显示悬停的信息，但占位符消失了，我有点麻烦。这就是我目前正在建设的地方：

我要讲的部分是折叠下面的右栏，上面有圆圈和小商店图标

我用纯HTML和CSS实现了悬停效果。这是我的HTML：

<div id="big-circle" class="circle big">

    <div class="circle c-one small"><i class="icon-store2"><!-- icon --></i></div>

        <div id="circle-one-text">
            Circle One Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div>

    <div class="circle c-two small"><i class="icon-store2"><!-- icon --></i></div>
        <div id="circle-two-text">
            Circle Two Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div> 

     <div class="circle c-three small"><i class="icon-store2"><!-- icon --></i></div>
        <div id="circle-three-text">
            Circle Three Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div> 

    <div class="circle c-four small"><i class="icon-store2"><!-- icon --></i></div>
        <div id="circle-four-text">
            Circle Four Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div> 


    <div id="circle-placeholder-text">
        Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div>

</div>

我想做的是当其他文本出现时占位符文本消失

另外，我想添加一个漂亮的淡入/淡出。如有任何建议，将不胜感激

这在jQ/JS中可能更好吗？

更新：

由于小圆圈和占位符是兄弟，我想不出一个css方法来实现它。当然，还有一些变通办法：

您可以为圆的文本指定与容器相同的背景，并为其指定z索引以覆盖占位符文本：

#circle-one-text, #circle-two-text, #circle-three-text, #circle-four-text {
    ...
    background-color: #f5f5f5;
    z-index: 40;
}

或者，您可以将圆圈占位符文本移动到.small div中，您需要4而不是1，然后将它们放置在同一位置，并使用类似以下内容：

.small #circle-placeholder-text {
    visibility: visible;
}

.small:hover #circle-placeholder-text {
    visibility: hidden;
}

同样，如果可以使用jQuery完成，那么它将非常简单：

$('.small').hover(function() {
    $('#circle-placeholder-text').fadeToggle('slow');
)

对于淡入淡出部分，可以使用过渡

---

但是，如果可以使用jQuery，那么可以通过使用其内置函数（如fadeToggle）轻松实现它

这是完全可能的，即使圆圈和占位符是同级的。当鼠标悬停在圆圈上时，除了页面上已有的代码外，还需要类似的代码来显示各个文本段落。

正如Samuri所指出的，可以通过使用不透明度来显示/隐藏元素而不是显示来生成转换：

transition: opacity 0.2s linear;
opacity: 0;

---

一般来说，使用JavaScript/jQuery可以更容易地考虑和做这类事情，但完全在CSS中做这类事情可以被认为是更干净的代码。

Class.circle有一个主包装器，当您悬停它时，它会隐藏占位符！是的，我的错，小圆圈和它们的容器有相同的等级。圆圈和我把事情搞混了。由于.small圆圈与文本占位符是同级的，据我所知，它不能直接使用CSS来完成。查看更新后的答案是否适合您。

div.c-one:hover ~ div#circle-placeholder-text,
div.c-two:hover ~ div#circle-placeholder-text,
div.c-three:hover ~ div#circle-placeholder-text,
div.c-four:hover ~ div#circle-placeholder-text {
    display: none;
}

transition: opacity 0.2s linear;
opacity: 0;