Ссылка не будет отображаться активной, чтобы щелкнуть при наведении курсора - PullRequest
Новая
       17

Ссылка не будет отображаться активной, чтобы щелкнуть при наведении курсора

1 голос
/ 27 марта 2019

У меня есть эффект наведения на дочерний элемент 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>

1 Ответ

3 голосов
/ 27 марта 2019

Похоже, что ваш якорный тег не содержит текст, который вы хотите связать, взгляните на прикрепленный пример, я переместил вашу ссылку, чтобы обернуть "связаться со мной", и добавил несколько стилей, чтобы лучше показать результат: 

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