css - 如何在悬停时为具有动态内容的 div 提供可拉伸的背景或边框

Question

这证明是一个挑战。我们有一个：

<div id="inhalt_rechts" style="width:31.47925%; float:right; border-left:1px dotted #969696; margin:2.3475% 0%; padding:0% 1.17375%;">

div 由垂直延伸的动态内容（主要但不总是 img 后跟文本）提供。

我们要：

1.使整个div可以点击，这样我们就可以给它一个悬停效果；

2.赋予悬停效果这个（背景/边框？）图像，它与内容垂直延伸：

任何帮助将不胜感激！

Answer 1

我会做的是使用

http://www.w3schools.com/css3/css3_borders.asp

使用box-shadow属性创建阴影

然后我会在底部制作另一个带有小箭头的 div。

http://jsfiddle.net/6Nncm/

Answer 2

试试这个

html
<a href="">Lorem ipsum dolor sit amet consecteur </a>

css
a {
    border:1px solid #eee;
    border-radius::10px;
    box-shadow:1px solid #eee;
    display:block;
    position:relative;
}
a:after {
    background:url( arrow-image.png ) no-repeat;
    bottom:0;
    content:"";
    height:20px;
    position:absolute;
    left:50px;
    margin-left:-50px; // the width of the arrow / 2
    width:100px;
}
a:hover {
    background:pink;
}

显然你需要替换背景，边框颜色和东西