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>标记为什么会这样做的更多信息，请考虑阅读以下堆栈溢出问题的答案Why are nested anchor tags illegal?

Answer 2

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

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

}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

更改包含文字的<a>元素＆＃34;点击此处＆＃34;到<p>元素。嵌套<a>代码无效，因为您只需将<a>标记包裹在必须链接的内容之外。

所以在你的情况下，你不想要文本＆＃34;点击这里＆＃34;链接，但围绕那个div。将<a>包裹在该div周围，而不仅仅围绕文本＆＃34;点击此处＆＃34;。

<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')">

我在你的小提琴中检查了这个，它似乎表现得像你想要的那样。除了所有这一切都是警报＆＃34;你好＆＃34;。

Answer 5

您可以使用JS，onclick函数，或使用<a></a>

包装div

像这样http://jsfiddle.net/52VtD/13935/

Answer 6

您目前通过将其.pre-info包装在锚标记中，从Click Here中删除锚点并将其替换为<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>

使整个div可点击

6 个答案: