Q:

Не срабатывает псевдокласс :hover

Здравствуйте.
При наведении на картинку, она затемняется и сверху появляется блок с информацией, в которой есть в том числе и ссылка. Тут проблем не возникло. Но захотел выделить ссылку при наведении, hover почему-то срабатывает, только если навести на ссылку резко. Из за чего это происходит?
Заранее спасибо.

figure {
  position: relative;
  overflow: hidden;
  ;
  width: 315px;
  height: 315px;
  background: rgba(25, 24, 22, 0.7);
}

figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
}

figcaption ul {
  list-style-image: url("img/marker.png");
  margin-left: 40px;
  font-size: 15px;
  color: #fff;
}

figcaption li {
  padding-bottom: 20px;
}

figcaption a {
  width: 156px;
  background-color: #fff;
  color: #1c1611;
  border-radius: 15px;
  padding: 6px 16px;
  font-weight: bold;
}

figure figcaption::before {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  border: 3px dashed #ffda4b;
  content: '';
}

figure h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  color: #ffda4b;
  font-size: 27px;
  text-transform: uppercase;
}

figure figcaption::before,
figure ul,
figure h2,
figure a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0);
  transform: scale(0);
}

figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px 30px;
}

figure:hover h2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

figure:hover figcaption::before,
figure:hover ul,
figure:hover a {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figcaption a:hover {
  color: #fff;
  background-color: #ffda4b;
}

figure:hover figcaption {
  background-color: rgba(58, 52, 42, 0);
}

figure:hover img {
  opacity: 0.2;
}
<figure>
  <img src="img/prewiew.png" alt="">
  <figcaption>
    <h2>Игровой сайт</h2>
    <ul>
      <li>CMS с возможностью редактировать сайт</li>
      <li>Временной таргетинг</li>
      <li>Интеграция с Яндекс.Касса</li>
    </ul>
    <a href="#">Посмотреть</a>
  </figcaption>
</figure>

A:

Добавьте position: relative на кнопку, чтобы его не перекрывали другие невидимые элементы:
figure:hover a {
  position: relative;
}

figure{
 position: relative;
 overflow: hidden;;
 width: 315px;
  height:315px;
 background: rgba(25,24,22, 0.7);
}


figure img {
 position: relative;
 display: block;
 min-height: 100%;
 max-width: 100%;
}

figcaption ul{
 list-style-image: url("img/marker.png");
 margin-left: 40px;
 font-size: 15px;
 color: #fff;
}
figcaption li{
 padding-bottom: 20px;
}

figcaption a{
 width: 156px;
 background-color: #fff;
 color: #1c1611;
 border-radius: 15px;
 padding: 6px 16px;
 font-weight: bold;
}

figure figcaption::before{
 position: absolute;
 top: 15px;
 right: 15px;
 bottom: 15px;
 left: 15px;
 border: 3px dashed #ffda4b;
 content: '';
}

figure h2 {
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,100%,0);
 transform: translate3d(0,100%,0);
 color: #ffda4b;
 font-size: 27px;
 text-transform: uppercase;

}

figure figcaption::before,
figure ul, figure h2, figure a {
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: scale(0);
 transform: scale(0);
}


 figure figcaption {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 15px 30px;
}

figure:hover h2{
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
 opacity: 1;
}

figure:hover figcaption::before,
figure:hover ul, figure:hover a {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}

figcaption a:hover{
 color: #fff;
 background-color:#ffda4b;  
}

figure:hover figcaption {
 background-color: rgba(58,52,42,0);
}

figure:hover img {
 opacity: 0.2;
}
figure:hover  a{
    position:relative;
}
<figure>
    <img src="img/prewiew.png" alt="">
   <figcaption>
    <h2>Игровой сайт</h2>
    <ul>
     <li>CMS с возможностью редактировать сайт</li>
     <li>Временной таргетинг</li>
     <li>Интеграция с Яндекс.Касса</li>
    </ul>
    <a href="#">Посмотреть</a>
   </figcaption>   
   </figure>

A:

Происходит это, потому что прозрачный всплывающий ::before псевдоэлемент перекрывает собой кнопку, и сквозь него клик (и наведение) не проходит.
Чтобы исправить, добавьте такой стиль:
figure figcaption::before{
  pointer-events: none;
}

Это сделает ::before псевдоэлемент невосприимчивым к кликам и наведениям курсора, и они будут проходить сквозь него, корректно попадая на кнопку.

figure {
  position: relative;
  overflow: hidden;
  ;
  width: 315px;
  height: 315px;
  background: rgba(25, 24, 22, 0.7);
}

figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
}

figcaption ul {
  list-style-image: url("img/marker.png");
  margin-left: 40px;
  font-size: 15px;
  color: #fff;
}

figcaption li {
  padding-bottom: 20px;
}

figcaption a {
  width: 156px;
  background-color: #fff;
  color: #1c1611;
  border-radius: 15px;
  padding: 6px 16px;
  font-weight: bold;
}

figure figcaption::before {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  border: 3px dashed #ffda4b;
  content: '';
  pointer-events: none;
}

figure h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  color: #ffda4b;
  font-size: 27px;
  text-transform: uppercase;
}

figure figcaption::before,
figure ul,
figure h2,
figure a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0);
  transform: scale(0);
}

figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px 30px;
}

figure:hover h2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

figure:hover figcaption::before,
figure:hover ul,
figure:hover a {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figcaption a:hover {
  color: #fff;
  background-color: #ffda4b;
}

figure:hover figcaption {
  background-color: rgba(58, 52, 42, 0);
}

figure:hover img {
  opacity: 0.2;
}
<figure>
  <img src="img/prewiew.png" alt="">
  <figcaption>
    <h2>Игровой сайт</h2>
    <ul>
      <li>CMS с возможностью редактировать сайт</li>
      <li>Временной таргетинг</li>
      <li>Интеграция с Яндекс.Касса</li>
    </ul>
    <a href="#">Посмотреть</a>
  </figcaption>
</figure>

