CODEWITHSUNDEEP
htmlcsshyperlink
Hector Harris-Burton
Hector Harris-Burton

Reputation: 101

Link won't show active to click when hover overed

I have a hover over effect on a flex child that reveals a mini tab that should be able to be clicked but it's not allowing me to click (the click would take me further down the page, not included all the code as it is long).

Was wondering if anyone could help, cheers.

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

Upvotes: 1

Views: 107

Answers (1)

Brennan Jenkins
Brennan Jenkins

Reputation: 64

It seems like your anchor tag isn't wrapping the text you wish to link, take a look at the attached example, I have moved your link to wrap 'contact me' and added a few styles to better show the result:

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

Upvotes: 2

Related Questions