Question

我在这里尝试将链接用于工作时遇到了困难。我无法得到链接。我把链接作为链接，我希望成为一个链接，但它不起作用。我相信悬停效果会以某种方式影响链接，但我无法看到哪个和哪个部分。

编辑1：我希望红色框出现在所有内容的前面，并在悬停后，红色框消失，链接可用

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 1

我认为我现在按照你想要的方式工作，把它放在css上：

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

Check it out :)

Answer 2

只需将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>

Answer 3

解决方案将在下面更改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);
}

Answer 4

您可能没有包含引导程序CSS文件。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

使链接可见

4 个答案: