Ich habe hier Schwierigkeiten, den Link dort zum Laufen zu bringen. Ich kann den Link nicht anzeigen lassen. Ich habe dort den Link für den Absatz eingefügt, der ein Link sein soll, aber er funktioniert nicht. Ich glaube, der Hover-Effekt wirkt sich irgendwie auf den Link aus, kann aber nicht sehen, welcher und welcher Teil.

Bearbeiten 1: Ich möchte, dass das rote Feld vor allem angezeigt wird. Nach dem Bewegen des Mauszeigers verschwindet das rote Feld und der Link ist verfügbar

.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>
0
Jose Afonso 17 Apr. 2018 im 10:52

4 Antworten

Beste Antwort

Fügen Sie einfach pointer-events: none ref zum Overlay:

.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>
1
Temani Afif 17 Apr. 2018 im 09:48

Ich glaube, ich habe es so gemacht, wie Sie es jetzt wollen, indem ich es auf CSS gestellt habe:

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

Hör zu :)

1
Gabriel Morais 17 Apr. 2018 im 08:36

Die Lösung würde z-index unten ändern:

.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);
}
0
Mubariz Hajimuradov 17 Apr. 2018 im 08:02

Sie haben die Bootstrap-CSS-Datei wahrscheinlich nicht aufgenommen.

.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>
-1
Gerard 17 Apr. 2018 im 07:57