html - 尝试创建纯 CSS 弹出效果

Question

我正在尝试创建一个会弹出到左侧的悬停面板效果，但我遇到了一些麻烦。我附上了一张我想要制作的效果的图片。

有一个例子说明我正在尝试在 CodePen 上进行改造。检查一下:
http://codepen.io/anon/pen/CgKqs

我今天一定是完全精神障碍了，因为我根本想不通。我的目标是在没有 javascript 的情况下做到这一点，作为一个纯 CSS 的东西。 我很难将“弹出”正确定位。

具体问题是:

1. 悬停后(返回到它假定的默认状态)元素在 IE 中消失。
2. 悬停的“弹出”会强制显示水平滚动条。

一些仁慈的忍者般的 HTML/CSS 天才可以伸出援手吗？

谢谢，

亚当。

Answer 1

这是你想要的:

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

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

编辑:添加了新的 fiddle 链接..

https://jsfiddle.net/BerkerYuceer/sd8mLajr/

如果需要，您可以将这些内容 div 变成链接。