jquery - 如何使整个div可点击？

Question

我正在尝试制作 4 boxes在整个区域都可以点击但没有成功。

这是箱子:

目前只有框内的文本是可点击的，但我正试图让整个框都可以点击。我搜索了分离整个框的 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

您可以将整个元素包裹在一个 anchor 标记中:

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