Question

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

enter image description here

有一个我想在CodePen上做的事情的例子。检查出来：
http://codepen.io/anon/pen/CgKqs

我今天必须有一个完整的心理障碍，因为我根本无法解决这个问题。我的目标是在没有javascript的情况下执行此操作，仅作为CSS。 我很难让'弹出'正确定位。

具体问题是：

悬停后（返回到假设的默认状态）项目在IE中消失。
悬停的'弹出'会强制显示水平滚动条。

某种类似忍者的HTML / CSS天才可以伸出援助之手吗？

谢谢，

亚当。

Answer 1

这是你想要的：

的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转换为链接。

Answer 2

这种魔法通常使用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

Answer 3

您放在codepen上的代码不起作用，因为display: block元素需要a才能使hover伪类工作：

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

Answer 4

我可以建议。首先不使用悬停，通过减少宽度和使用

来剪裁额外的内容

overflow:hidden

在css hover上增加宽度以显示完整框或显示溢出的内容例如

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

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

仔细选择样式的宽度和其余部分以达到此效果。当我没有学习javascript时，我曾经以这种方式创建向下滚动菜单。

试图创建一个仅限CSS的弹出效果

4 个答案: