使整个 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; 

}

我尝试移动 a 标签，但没有成功，还尝试给它一个固定的高度和宽度。

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

Answer 1

嵌套的<a> 是不必要的，您可以将其完全删除，或者，如果您希望将鼠标悬停在弹出 div 中的按钮上，请将其转换为 <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>标签可能会像这样考虑阅读以下堆栈溢出问题Why are nested anchor tags illegal?的答案的更多信息

Answer 2

您可以使用伪增加<a> 的大小，因此整个框都被链接覆盖：http://jsfiddle.net/52VtD/13936/

.peaceful {
  overflow:hidden;
  position:relative;
}
.peaceful a:before {
  content:'';
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;

}

@import url('http://getbootstrap.com/dist/css/bootstrap.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;
}

.peaceful {
  overflow:hidden;
  position:relative;
}
.peaceful a:before {
  content:'';
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

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

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

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

Answer 3

将包含文本“单击此处”的<a> 元素更改为<p> 元素。 嵌套<a> 标签是无效的，因为您只将<a> 标签包裹在必须链接的内容周围。

因此，在您的情况下，您不希望文本“单击此处”链接，而是围绕该 div 链接。将 <a> 包裹在该 div 周围，而不仅仅是文本“单击此处”。

<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>
                    <p class="btn btn-success">Click Here </p>
                </div>
            </a>
    </div>
</div>

JSFiddle demo

---

我还建议您使用W3 Validator 来查看您的 HTML 是否有效。

在这种情况下，它说：

错误：已看到开始标记 <a>，但已打开相同类型的元素。

如下图所示：

Answer 4

为什么不给整个 div 添加一个 onclick：

<div class="col-sm-4 peaceful" onclick="alert('hello')">

我在你的小提琴中检查了这个，它似乎表现得像你想要的那样。除了这一切只是提醒“你好”。

Answer 5

您目前正在通过将.pre-info 包装在锚标记中来使其可点击，从单击此处删除锚并将其替换为<p> 元素以保持相同的样式。

<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>
        <p>
          Click Here
        </p>
      </div>
    </a>
  </div>
</div>

但是，以下将导致更好的实施。将整个 .peaceful 元素包装在锚标记中，使其可点击。

只需确保将display: block 放在您的锚标记上，这样它的行为和样式就可以很好地适应您希望对其进行的任何自定义样式。出于这个原因，我将 .wrapper-anchor 类添加到外部锚标记：

.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;
}

.wrapper-anchor {
    display: block;
}

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

Answer 6

你可以使用 JS，onclick 函数，或者用 <a></a> 包裹你的 div

喜欢这个http://jsfiddle.net/52VtD/13935/