2

Здравствуйте.

При наведении на картинку, она затемняется и сверху появляется блок с информацией, в которой есть в том числе и ссылка. Тут проблем не возникло. Но захотел выделить ссылку при наведении, 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>

3 ответа 3

5

Добавьте 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>

3

Происходит это, потому что прозрачный всплывающий ::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>

1

Обратите внимание на то, что ваша ссылка просто "прячется" за другими слоями при анимации, вам надо задать параметр z-index:

figcaption a {
    position: relative;
    z-index: 999;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.