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

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

＆＃13;

let a = document.createElement("a");
a.href = "http://localhost:8080";

console.log(a.protocol);
console.log(a.host);
console.log(a.port);

＆＃13;

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

＆＃13;

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>

如何使整个div可点击？

5 个答案: