Question

我对flex子项有一个悬停效果，该子项会显示一个应该可以单击的小选项卡，但不允许我单击（单击会使我进入页面的更下方，不包括所有代码很长）。

想知道是否有人可以帮助，欢呼。

/*Button for hover over on sub elements*/

.gridItemButton {
  position: absolute;
  top: 0;
  right: 20px;
  padding: 17px 20px;
  background-color: #000;
  color: #fff;
  font-size: 13px;
  transform-origin: 0 0;
  will-change: transform, opacity;
  transform: scaleY(0) translateZ(0);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  font-family: Cardo, sans-serif
}


/*Hover effect for button reveal*/

.grid-item:hover .gridItemButton {
  transform: scaleY(1) translateZ(0);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1)
}


/*Hover button reveal*/

.gridItemButtonLabel {
  transform: translateY(-15px);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
  display: block;
  opacity: 0
}


/*Button reveal*/

.grid-item:hover .gridItemButtonLabel {
  transform: translateY(0);
  opacity: 1
}

<div class="grid-item grid-item-wide bottom-item-about">
  <h3 class="case-item-header">Header</h3>
  <span class="gridItemButton">
		  <span class="gridItemButtonLabel">Contact me</span>
  </span>
  <a href="#contact" class="gridItemLink"></a>
</div>

Answer 1

您的锚标记似乎没有包装要链接的文本，请看下面的示例，我已将链接移动为包装“与我联系”，并添加了一些样式以更好地显示结果：

/*Button for hover over on sub elements*/

.gridItemButton {
  position: absolute;
  top: 0;
  right: 20px;
  padding: 17px 20px;
  background-color: #000;
  color: #fff;
  font-size: 13px;
  transform-origin: 0 0;
  will-change: transform, opacity;
  transform: scaleY(0) translateZ(0);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  font-family: Cardo, sans-serif
}



/*Hover effect for button reveal*/

.grid-item:hover .gridItemButton {
  transform: scaleY(1) translateZ(0);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1)
}


/*Hover button reveal*/

.gridItemButtonLabel {
  transform: translateY(-15px);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
  display: block;
  opacity: 0
}


/*Button reveal*/

.grid-item:hover .gridItemButtonLabel {
  transform: translateY(0);
  opacity: 1
}



/*Added spacer for visual effect of link jump*/
#spacer {
  height: 800px
}

/*Link styling*/
.gridItemLink {
  color:#ffffff;
  text-decoration:none;
  cursor:pointer;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid-item grid-item-wide bottom-item-about">
    <h3 class="case-item-header">Header</h3>
    <span class="gridItemButton">
		  <a href="#contact" class="gridItemLink"><span class="gridItemButtonLabel">Contact me</span>
    </a>
    </span>
  </div>
  <div id="spacer"></div>
  <div id="contact">Contact information div</div>
</body>

</html>

将鼠标悬停在链接上时，点击链接不会显示为活动状态

1 个答案: