我正在嘗試構建一個顯示懸停信息的圓,並且佔位符正在消失。這是我目前正在建設的地方:http://ecommercepro.canny-creative.com懸停顯示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>
這是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中可能更好嗎?
類''。圓'有一個主包裝,當你懸停它隱藏佔位符! –
對,我的壞,小圈子和他們的容器有同一類'.circle',我的東西有點混亂。 由於'.small'圈是與文本佔位符的兄弟,據我所知不能直接使用CSS來完成。看看更新後的答案是否適合你。 – Samurai