使整个可点击

Question

我有点麻烦，使整个可点击。现在我有一张图片，当你将鼠标悬停在上面时，另一个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>是不必要的，你可以完全剥离出来，或者，如果你想保持鼠标按钮，在弹出的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> 

有关为什么更多信息嵌套0​​标签可能像这样考虑读答案以下堆栈溢出问题Why are nested anchor tags illegal?

Answer 2

更改包含文本“点击这里”的<p>元素<a>元素。 嵌套<a>标签是无效的，因为您只需围绕必须链接的标签打包<a>标签。

因此，在你的情况下，你不希望文本“点击这里”链接，但周围的div。围绕该div围绕<a>，而不是围绕“点击此处”文本。

<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是否是有效的。

在这种情况下，它说：

Error: Start tag <a> seen but an element of the same type was already open.

如下图所示：

Answer 3

为什么你不干脆的onclick添加到整个DIV：

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

我在你的小提琴中检查过它，它似乎表现得像你想要的。除了这一切都是警惕的“你好”。

Answer 4

您可以使用JS时，酒店的onclick功能，或与<a></a>

包装你的DIV

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

Answer 5

可以增加<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; 

}

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

目前，您正在通过将其包装在锚标记中来点击.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>