使整个div可点击

Question

我在整个div可点击时遇到了一些麻烦.现在我有一个图像,当你将鼠标悬停在它上面时,另一个div会向上滑动信息.我想让整个div可点击.例如,检查JsFiddle

这是我到目前为止:

// HTML

<div class="col-sm-4 peaceful">
    <div class="pre-inner">
        <img src="http://lorempixel.com/304/188/">
            <a href="http://www.google.com">
                <div class="pre-info">
                    <h4>See our activity philosophy</h4>
                    <a class="btn btn-success" href="http://www.google.com">Click Here </a>
                </div>
            </a>
    </div>
</div>

// CSS

.pre-inner {
    position: relative;
    max-width: 300px;
    overflow: hidden;
    margin: 0px auto 0px;
}

.pre-info {
   position: absolute;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
   bottom: -187px;
   transition: all 0.5s ease;
   background-color: rgba(57, 68, 97, 0.65);
   left: 0;
   right: 0;
}

.pre-inner:hover .pre-info {
   background-color: rgba(57, 68, 97, 0.65);
   bottom: 0; 
   height: 100%;
   width: 100%;
   color: #fff; 

}

我尝试移动一个标签,但这不起作用,也尝试给它一个固定的高度和宽度.

我已经创建了一个JsFiddle:http://jsfiddle.net/52VtD/13932/

Answer 1

嵌套<a>是不必要的,您可以完全剥离它,或者,如果您希望将鼠标悬停在弹出窗口中,请将其转换为<span>

 <div class="col-sm-4 peaceful">
     <div class="pre-inner">
         <img src="http://lorempixel.com/304/188/">
             <a href="http://www.google.com">
                 <div class="pre-info">
                     <h4>See our activity philosophy</h4>
                     <span class="btn btn-success">Click Here </span>
                 </div>
             </a>
     </div> </div>

有关嵌套<a>标签为什么会这样做的更多信息,请考虑阅读以下堆栈溢出问题的答案为什么嵌套锚标签非法？