Question

我的一个Google协作平台页面上有几个CSS框，它们围绕着一个js滑块。

我想通过点击框而不是点击框中的文字链接到我网站上的其他页面。

我做了一些研究，但运气不好。有人说它在CSS中是可行的，有人说是javascript。

我尝试将标签切换到外面，但这完全打破了我的滑块。

我的代码片段如下：

样式（CSS）

 .box1 {
   background: ##ffd700;
   border-radius: 6px;
   cursor: pointer;
   height: 100px;
   line-height: 100px;
   text-align: center;
   transition-property: background;
   transition-duration: 1s;
   transition-timing-function: linear;
   width: 100px;
   position: relative;
   left: 0px;
   top: 0px;
   z-index:2;
 }
.box1:hover {
   background: #990033;
 }

HTML

<div class="box1"><a href="https://www.google.co.uk" target = "_self"><font color = #ffffff>Google</font></a></div>

我在这里创建了一个jsfiddle：http://jsfiddle.net/tyh44dub/

我是否需要在代码中添加更多javascript，或者是否有可能通过CSS执行此操作？

注意：我总共创建了8个盒子。

Answer 1

只需将您的代码移至Div的外部，即可为整个链接点击整个div。

<a href="https://www.google.co.uk" target="_self"><div class="box1"><font color = #ffffff>Google</font>
</div></a>

Answer 2

用div标签包装div;而是将锚放在div中。

在这里演示

 .box1 {
     background: #ffd700;
     border-radius: 6px;
     cursor: pointer;
     height: 100px;
     line-height: 100px;
     text-align: center;
     transition-property: background;
     transition-duration: 1s;
     transition-timing-function: linear;
     width: 100px;
     position: relative;
     left: 0px;
     top: 0px;
     z-index:2;
 }
 .box1:hover {
     background: #990033;
 }

<a href="https://www.google.co.uk" target="_self"><div class="box1"><font color = #ffffff>Google</font>
</div></a>

Answer 3

如果希望锚点填充整个元素，请将锚点设置为块元素

.box1 > a {
    display: block;
}

Answer 4

我把它添加到你的JSFiddle。无需重新构建HTML。

http://jsfiddle.net/tyh44dub/2/

.box1 a{
      position:absolute;
      display:block;
      top:0px;
      bottom:0px;
      left:0px;
      right:0px;
}

Answer 5

标签内的任何内容都是可点击的并链接到href，您只需将div标签放在标签内，如下所示：

    <a href="https://www.google.co.uk" target = "_self"><div class="box1" 


     style="color:#ffffff">Google</div></a>

Answer 6

首先，W3Schools正在删除用于格式化元素的HTML标记，将该方面留给CSS。

其次，您可以将该想法用作带有onclick事件的按钮，例如：

HTML

<button onclick="click()">Click me!</button>

的Javascript

function click() {
window.location("www.google.com");
};

您无需从div中删除链接/按钮。

单击CSS框加载另一个网页。 CSS还是js？

6 个答案:

HTML

的Javascript