Question

我正在尝试构建一个显示悬停信息的圆圈，我在占位符消失时遇到了一些麻烦。这是我目前正在建设的地方：http://ecommercepro.canny-creative.com

我正在讨论的部分是折叠下面的右侧列，带有圆圈和小商店图标。

我的悬停效果显示纯粹的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>

这就是CSS：

#big-circle {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

.circle {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background-color: #f5f5f5;
    border: 2px solid lightgrey;
    display: inline-block;
    position: absolute;
    transition:all 0.3s ease;
    text-align: center;
}

.circle.big {
    height: 450px;
    width: 450px;
    border: 2px dashed lightgrey;
    background: #f5f5f5;
    margin: 0px;
}


.circle.small:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.circle i {
  font-size: 30px;
  line-height: 75px;
  margin: 0px;
}

.c-one {
  left: 20px;
  top: 20px;
}


.c-two {
    right: 20px;
    top: 20px;
}


.c-three {
    left: 20px;
    bottom: 20px;
}


.c-four {
    right: 20px;
    bottom: 20px;
}

#circle-placeholder-text {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    position: absolute;
    right: 0;   
    top: 120px;
    width: 75%;
    display: block;
}


#circle-one-text, #circle-two-text, #circle-three-text, #circle-four-text {
    display: none;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    position: absolute;
    right: 0;   
    top: 120px;
    width: 75%;
}


div.c-one:hover + div#circle-one-text, div.c-two:hover + div#circle-two-text, div.c-three:hover + div#circle-three-text, div.c-four:hover + div#circle-four-text {
    display: block;
}

我想要发生的是占位符文本在其他文本出现时消失？

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

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

Answer 1

<强>更新

由于小圆圈和占位符是兄弟姐妹，我无法想到采用这种方法。当然有变通办法：

您可以为圆圈提供与容器相同背景的文本，并为其提供z-index以覆盖占位符文本：

#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');
)

...

对于淡入/淡出部分，您可以使用过渡。 Take a look at this.

如果您可以使用jQuery，则可以使用其内置函数（如fadeToggle()）轻松实现。 sample jsfiddle

Answer 2

这是完全可能的，即使圈子和占位符是兄弟姐妹。除了您在页面上已有的代码之外，您还需要类似的代码，以便在将鼠标悬停在圆圈上时显示各个文本段落。

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

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

transition: opacity 0.2s linear;
opacity: 0;

一般来说，这种事情可以说更容易思考并使用JavaScript / jQuery，但可以认为它更完整地用于CSS。

悬停显示Div和隐藏占位符

2 个答案: