3

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

在此处输入图像描述

有一个我试图在 CodePen 上改头换面的例子。看看：
http ://codepen.io/anon/pen/CgKqs

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

具体问题是：

  1. 悬停后（返回到它假定的默认状态）项目在 IE 中消失。
  2. 悬停的“弹出”强制出现水平滚动条。

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

谢谢，

亚当。

4

4 回答 4

3

这是你想要的：

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

编辑：添加了新的小提琴链接..

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

如果需要，您可以将这些内容 div 转换为链接。

于 2012-10-03T14:54:35.520 回答
1

这种魔法通常是使用 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-03T14:35:59.123 回答
1

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

.thingie li a {
  display: block;
    padding: 3px;
}
于 2012-10-03T15:00:51.157 回答
1

我可以建议。首先没有悬停让多余的内容被剪裁，通过减少宽度和使用

overflow:hidden

例如，在 CSS 悬停时增加宽度以显示完整框或显示溢出的内容

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

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

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

于 2012-10-03T15:01:50.620 回答