如何在动态内容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;
}

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