除非绝对定位，否则锚标签不可点击？

时间：2016-02-22 19:03:55

标签： html css html5 css3

我有以下HTML：

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    */
  /*left: 50%;
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-o-transform: translateX(-50%);
    	transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}
<a class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>

现在为什么不再是一个锚而是I.E.我不能再点击<a>了，为什么？

现在，我发现的一个解决方案是将容器更改为div标记，并且内部有一个a并将以下样式应用于它：

.info-boxes a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 99;
}

但这是一个“为什么”的问题而不是“如何解决这个问题”。

所以我想问一下，为什么<a>标签在这个给定的例子中不像一个？

3 个答案:

答案 0 :(得分：2)

您需要添加href，否则a无法点击

如果您不使用href，则只会将其视为占位符超链接，请参阅W3C

上的详细信息

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    */
  /*left: 50%;
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-o-transform: translateX(-50%);
    	transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}
＆＃13; 
<a href="#" class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

可能的答案，因为您没有指定是要转到其他页面还是仅在点击时执行某些操作。

您应该使用button标记。为什么？好吧，如果通过指定<a>属性进入页面，则应使用锚链接href。如果它是可点击的，则必须执行某些操作但不会转到另一个页面，而应使用button标记。

答案 2 :(得分：0)

a可能没有href。我不知道这是否也在原始代码中，但它似乎解决了这个问题。

当我添加你的代码时，它显然解决了它，它对我不起作用，所以我认为你在更改HTML时添加了一个href。

相关问题
最新问题