試圖創建一個僅用於CSS的彈出效果

我試圖創建一個懸浮面板效果，它會彈出到左側，但我遇到了一些麻煩。我附上了我想要製作的效果圖片。試圖創建一個僅用於CSS的彈出效果

enter image description here

還有就是什麼，我試圖讓超過上CodePen一個例子。檢查出來：
http://codepen.io/anon/pen/CgKqs

今天我必須有一個完整的心理障礙，因爲我根本無法弄清楚這一點。我的目標是做到這一點沒有JavaScript，作爲一個CSS的東西。 我真的有麻煩讓'彈出'來正確定位。

的具體問題是：

徘徊後（返回到它應該默認狀態）項目在IE中消失。
懸停'彈出'迫使水平滾動條出現。

某種忍者般的HTML/CSS天才能幫忙嗎？

謝謝，

亞當。

來源

2012-10-03 Adam C

這裏是你想要的東西：

CSS：

/* Galerie */ 
.galerie { float:right; height:440px; width:160px; padding:10px; 
      background-color:grey; } 

/* Content boxes here */ 
.cont { float:right; height:130px; width:150px; padding:4px; margin-top:4px; 
background-color:grey; border:1px solid #000; border-radius:16px 16px 16px 16px; } 

/* Dont display the text until hover */ 
.txt { float:left; width:53%; display:none; } 

/* There is 4px padding between img and content div so for a fitting look 
    radius of image should be 16 - 4 = 12px */  
.pic { float:right; display:block; } 
.pic img { height:130px; width:150px; border-radius:12px 12px 12px 12px; } 

/* On Hover */ 
.cont:hover { width:320px; background-color:white; } 
.cont:hover .txt { display:block; }

HTML：

<div class="galerie"> 
    <div class="cont"> 
     <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/140095/140095,1310613638,1/stock-photo-team-work-ants-constructing-bridge-80955316.jpg"></div> 
     <div class="txt"> 
      This is the text of content 
      and some more text to see 
      and a little more text.. 
     </div> 
    </div> 
    <div class="cont"> 
     <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/51333/51333,1199715661,1/stock-photo-young-puppy-listening-to-music-on-headphones-8323504.jpg"></div> 
     <div class="txt"> 
      This is the text of content 
      and some more text to see 
      and a little more text.. 
     </div> 
    </div> 
    <div class="cont"> 
     <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/57421/57421,1154123042,1/stock-photo-four-penguins-in-antarctica-1607229.jpg"></div> 
     <div class="txt"> 
      This is the text of content 
      and some more text to see 
      and a little more text.. 
     </div> 
    </div> 
</div>

小提琴：

http://jsfiddle.net/BerkerYuceer/qQ8Gd/

，你可以把這些內容的div進入鏈接，如果你想要的。

來源

2012-10-03 14:54:35

嗨Berker。這是我一直在尋找的解決方案。謝謝你的幫助！ –

沒問題..我總是很喜歡純粹的css用戶。 –

這個魔術通常使用hover屬性來完成CSS樣式。

您定義了兩種樣式，一種是正常的，另一種是懸浮式。當用戶將鼠標懸停在一個特定的對象，懸停一個就會自動生效

這樣

a:link {color:#FF0000;}  /* unvisited link */ 
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;} /* mouse over link */ 
a:active {color:#0000FF;} /* selected link */

你可以申請你想上懸停儘可能多的屬性。

這也被稱爲僞類。

看看這個鏈接

http://www.w3schools.com/css/css_pseudo_classes.asp

來源

2012-10-03 14:35:59

嗨Murtuza，當你將鼠標懸停在一個項目上時，它能夠正確顯示，特別是在浮動/位置方面。如果你看看我製作的CodePen，你會看到我遇到的具體問題。 –

你把codepen不起作用，因爲你需要display: blocka元素爲hover僞類工作的代碼：

.thingie li a { 
    display: block; 
    padding: 3px; 
}

來源

2012-10-03 15:00:51

好點！謝謝。 –

我可以建議。首先沒有懸停，讓多餘的內容被剪切，通過減少寬度和期運用

overflow:hidden

於CSS懸停增加的寬度以顯示完整的盒子或顯示溢出的內容例如

yourSelector{ 
    width:200px; 
    overflow:hiddden; 
} 

yourSelecto:hover{ 
    overflow:visible; 
    width:400px 
}

選擇樣式的寬度和休息仔細達到這個作用。我曾經以這種方式創建向下滾動菜單，當我沒有學習JavaScript時。

來源

2012-10-03 15:01:50 geekman

試圖創建一個僅用於CSS的彈出效果

回答

相關問題