2015-04-17 74 views
1

我正在嘗試構建一個顯示懸停信息的圓,並且佔位符正在消失。這是我目前正在建設的地方: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中可能更好嗎?

回答

0

更新時間:

由於小圓圈和佔位符是兄弟我想不出這樣做的CSS方式。有變通方法當然

你可以給圈子的文字相同的背景容器,並給它的z-index覆蓋佔位符文本:

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

或者你可以移動圓形佔位符文本的.small的div內(you'l需要的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

+0

類''。圓'有一個主包裝,當你懸停它隱藏佔位符! –

+0

對,我的壞,小圈子和他們的容器有同一類'.circle',我的東西有點混亂。 由於'.small'圈是與文本佔位符的兄弟,據我所知不能直接使用CSS來完成。看看更新後的答案是否適合你。 – Samurai

0

即使圓圈和佔位符是兄弟姐妹,這是完全可能的。除了在頁面上已有的內容外,您還需要類似的代碼,以便在懸停在圓圈上時顯示單個文本段落。

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中完成。