Сделайте ссылку видимой

У меня возникают трудности с попыткой заставить ссылку работать. Я не могу получить ссылку. Я поместил туда ссылку на абзац, который хочу сделать ссылкой, но он не работает. Я считаю, что эффект наведения каким-то образом влияет на ссылку, но я не могу понять, какая часть и какая.

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

.hover {
  position: relative;
  display: inline-block;
}

.hover {
  vertical-align: top;
}

.hover {
  z-index: 1;
}

.hover:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.3);
}

.hover:hover::before {
  background: rgba(255, 0, 0, 0);
}

<link rel = "stylesheet" type = "text/css" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class = "hover ">
  <img src = "https://placehold.it/250x250?text=IMAGEE" class = "img-responsive " alt = "Image">

  <div class = "carousel-caption">
    <p class = "textoColunas"> <a href = "www.google.com">Testes de Diagnóstico e
Entrevistas Vocacionais para admissão
aos cursos que a seguir se indica: 
</a></p>
  </div>

</div>

jsfiddle проблемы jsfiddle.net/joseafonso123az/mf7jvry4/7

— 17.04.2018 09:53

Проблема в том, что при наведении указателя мыши псевдоэлемент находится над ссылкой .. из-за z-index:2;, а ссылка только z-index:1; .. Просто установите z-index ссылки выше, чем псевдоэлемент ..

— 17.04.2018 10:11

html css

17.04.2018 09:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

532

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вероятно, вы не включили файл начальной загрузки CSS.

.hover {
  position: relative;
  display: inline-block;
}

.hover {
  vertical-align: top;
}

.hover * {
  z-index: 1;
}

.hover:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 14px;
  bottom: 0;
  background: rgba(255, 0, 0, 0.3);
}

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = " col-sm-4 hover ">
  <img src = "https://placehold.it/250x250?text=IMAGEE" class = "img-responsive " alt = "Image">
  <div class = "carousel-caption">
    <p class = "textoColunas"> <a href = "www.google.com">Testes de Diagnóstico e
Entrevistas Vocacionais para admissão
aos cursos que a seguir se indica: 
</a></p>
  </div>
</div>

С этим я теряю парящую часть, так что нет, это не то, что я хочу

— 17.04.2018 10:03

17.04.2018 09:57

Решением будет изменение z-index ниже:

.hover:before {
  content: "";
  position: absolute;
  z-index:2; /* Change the value of this and your code will work */
  top: 0;
  right: 0;
  left: 14px;
  bottom: 0;
  background: rgba(255, 0, 0, 0.3);
}

Это сделает текст впереди с самого начала, а это не то, что я хочу

— 17.04.2018 10:31

17.04.2018 10:02

Я думаю, что теперь он работает так, как вы хотите, поместив это в css:

 .hover:hover::before {
  background: rgba(255, 0, 0, 0);
  z-index:1;
}

Зацени :)

Это то, что вы пытались сделать?

— 17.04.2018 10:55

17.04.2018 10:36

Ответ принят как подходящий

Просто добавьте pointer-events: none^ref в оверлей:

.hover {
  position: relative;
  display: inline-block;
}

.hover {
  vertical-align: top;
}

.hover {
  z-index: 1;
}

.hover:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.3);
}

.hover:hover::before {
  background: rgba(255, 0, 0, 0);
}

<link rel = "stylesheet" type = "text/css" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class = "hover ">
  <img src = "https://placehold.it/250x250?text=IMAGEE" class = "img-responsive " alt = "Image">

  <div class = "carousel-caption">
    <p class = "textoColunas"> <a href = "www.google.com">Testes de Diagnóstico e
Entrevistas Vocacionais para admissão
aos cursos que a seguir se indica: 
</a></p>
  </div>

</div>

Несмотря на то, что фрагмент не работает должным образом, это помогло! Благодарность

— 17.04.2018 11:45

@JoseAfonso, потому что вам не хватает начальной загрузки, теперь это исправлено;)

— 17.04.2018 11:49

17.04.2018 11:42