如何使整个div可点击？

Question

我正在尝试使4个框在整个区域都可单击，但没有成功。

这是盒子：

当前，只有框内的文本是可单击的，但是我正在尝试使整个框可单击。 我在CSS中搜索了整个框，发现了这一点：

.slist_sc_2 .slist_item { 
    transition: all 0ms; 
    padding: 30px 25px 20px 25px; 
    height: 270px; 
    overflow: hidden;  
    float: left; 
    display: block; 
    width: calc(25% - 30px); 
    margin:0 40px 40px 0
}

我进行了研究，发现该Codepen的功能与我在网站上尝试的功能相同，但是我不知道如何集成它。 有人可以就更改内容以这种方式工作给我一些建议吗？

从那部分更新了HTML：

<h2 style="font-weight:normal;">Other Services</h2></div></div><style type="text/css">.slist_sc_2 .slist_item {border: 5px #eeeeee solid; background-color: #44dd61}.slist_sc_2 .slist_item:hover {border-color:#26b7e7; background-color: #26b7e7}.slist_sc_2 .slist_item .ss2_header h3 a {color: #ffffff}.slist_sc_2 .slist_item:hover .ss2_header h3 a {color: #ffffff}.slist_sc_2 .slist_item .ss2_description, .slist_sc_2 .slist_item .ss2_description a {color: #ffffff}.slist_sc_2 .slist_item:hover .ss2_description, .slist_sc_2 .slist_item:hover .ss2_description a {color: #ffffff}</style><div class="slist_sc_2  text-center"><div class="slist_item">
                                    <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Paint-Brush-100.png"  alt="Complex designs"></div>
                                    <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/complex-designs/">Complex designs</a></h3></div>
                                    <div class="ss2_description"><a href="http://www.designwhizz.com/service/complex-designs/"></a></div>
                                </div><div class="slist_item">
                                    <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Google-Sites-100.png"  alt="Search engine optimisation"></div>
                                    <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/search-engine-optimisation/">Search engine optimisation</a></h3></div>
                                    <div class="ss2_description"><a href="http://www.designwhizz.com/service/search-engine-optimisation/"></a></div>
                                </div><div class="slist_item">
                                    <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Facebook-100.png"  alt="Social media management"></div>
                                    <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/social-media-management/">Social media management</a></h3></div>
                                    <div class="ss2_description"><a href="http://www.designwhizz.com/service/social-media-management/"></a></div>
                                </div><div class="slist_item">
                                    <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Blog-100.png"  alt="Content generation"></div>
                                    <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/content-generation/">Content generation</a></h3></div>
                                    <div class="ss2_description"><a href="http://www.designwhizz.com/service/content-generation/"></a></div>
                                </div></div></div></div></div></div>

Answer 1

您可以将整个元素包装在锚标记中：

 .slist_sc_2 .slist_item { background:#000; transition: all 0ms; padding: 30px 25px 20px 25px; height: 270px; overflow: hidden; float: left; display: block; width: calc(25% - 30px); margin:0 40px 40px 0 } 

 <div class="slist_sc_2"> <a href="#"> <div class="slist_item">Box 1</div> </a> <a href="#"> <div class="slist_item">Box 2</div> </a> <a href="#"> <div class="slist_item">Box 3</div> </a> <a href="#"> <div class="slist_item">Box 4</div> </a> </div> 

Answer 2

简单定义:active 。 如果要添加JavaScript功能，请添加带有.click函数的jQuery。 如果需要后者，只需评论。

 .slist_sc_2 .slist_item { transition: all 0ms; padding: 30px 25px 20px 25px; height: 270px; overflow: hidden; float: left; display: block; width: calc(25% - 30px); margin:0 40px 40px 0; cursor:pointer; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slist_sc_2 .slist_item:active { color:red; background:blue; } 

 <div class="slist_sc_2"> <div class="slist_item"> Test </div> </div> 

Answer 3

如果您不会在js中进行设置，则在div上单击时不会发生任何事情。但是，如果您只希望它显示为可点击的，oyu可以尝试将其添加到CSS中：

.slist_sc_2 .slist_item:hover
{ 
cursor: pointer;
}

这会将光标更改为悬停时的手形光标，使其看起来可单击。

Answer 4

使链接绝对且相对于主容器。 请参阅下面的示例。

 .slist_sc_2 .slist_item { transition: all 0ms; padding: 30px 25px 20px 25px; /**height: 270px; removed for testing purposes**/ overflow: hidden; float: left; display: block; width: calc(25% - 30px); margin:0 40px 40px 0; position: relative; text-align: center; /**Added for testing purposes**/ } .ss2_header h3 > a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: 10px; } 

 <h2 style="font-weight:normal;">Other Services</h2></div></div><style type="text/css">.slist_sc_2 .slist_item {border: 5px #eeeeee solid; background-color: #44dd61}.slist_sc_2 .slist_item:hover {border-color:#26b7e7; background-color: #26b7e7}.slist_sc_2 .slist_item .ss2_header h3 a {color: #ffffff}.slist_sc_2 .slist_item:hover .ss2_header h3 a {color: #ffffff}.slist_sc_2 .slist_item .ss2_description, .slist_sc_2 .slist_item .ss2_description a {color: #ffffff}.slist_sc_2 .slist_item:hover .ss2_description, .slist_sc_2 .slist_item:hover .ss2_description a {color: #ffffff}</style><div class="slist_sc_2 text-center"><div class="slist_item"> <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Paint-Brush-100.png" alt="Complex designs"></div> <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/complex-designs/">Complex designs</a></h3></div> <div class="ss2_description"><a href="http://www.designwhizz.com/service/complex-designs/"></a></div> </div><div class="slist_item"> <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Google-Sites-100.png" alt="Search engine optimisation"></div> <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/search-engine-optimisation/">Search engine optimisation</a></h3></div> <div class="ss2_description"><a href="http://www.designwhizz.com/service/search-engine-optimisation/"></a></div> </div><div class="slist_item"> <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Facebook-100.png" alt="Social media management"></div> <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/social-media-management/">Social media management</a></h3></div> <div class="ss2_description"><a href="http://www.designwhizz.com/service/social-media-management/"></a></div> </div><div class="slist_item"> <div class="ss2_icon"><img src="http://www.designwhizz.com/wp-content/uploads/2017/04/Blog-100.png" alt="Content generation"></div> <div class="ss2_header"><h3><a href="http://www.designwhizz.com/service/content-generation/">Content generation</a></h3></div> <div class="ss2_description"><a href="http://www.designwhizz.com/service/content-generation/"></a></div> </div><div style="clear: left"></div></div><div style="clear: left"></div></div></div></div> 

Answer 5

如果要使用javascript / jquery进行操作，则可以向div添加一个属性以指定URL，然后在单击时将window.location更改为该URL。

 $('div').on('click',function() { window.location.href = $(this).attr('data-href'); }) 

 div { display: inline-block; background: green; width: 100px; height: 100px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-href="//google.com"></div> <div data-href="//stackoverflow.com"></div>