So verbergen Sie CSS-Elemente

Wie verstecke ich CSS-Elemente? In diesem Artikel werden Ihnen 5 Möglichkeiten zum Ausblenden von CSS-Elementen vorgestellt, damit Sie verstehen, wie Sie CSS-Elemente ausblenden können und welche Nuancen Sie bei der Verwendung dieser Methoden zum Ausblenden von Elementen beachten müssen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst kurz 5 Möglichkeiten vorstellen, CSS-Elemente auszublenden :

1. Verwenden Sie das Opazitätsattribut, um Elemente auszublenden

2. Verwenden Sie das Sichtbarkeitsattribut, um Elemente auszublenden

3. Verwenden Sie das Anzeigeattribut, um Elemente auszublenden

4. Verwenden Sie das Positionsattribut, um Elemente auszublenden

5. Verwenden Sie das Clip-Pfad-Attribut, um Elemente ausblenden

Lassen Sie uns diese 5 Methoden zum Ausblenden von CSS-Elementen im Detail vorstellen, damit jeder die subtilen Unterschiede zwischen ihnen verstehen kann.

Deckkraftattribut

Das Deckkraftattribut verbirgt ein Element, indem es seine Transparenz festlegt. Es ist so konzipiert, dass es den Begrenzungsrahmen des Elements in keiner Weise verändert. Das bedeutet, dass das Setzen der Deckkraft auf Null das Element nur optisch verbirgt; das Element behält weiterhin seine Position und wirkt sich auf das Layout der Seite aus und reagiert auch auf Benutzerinteraktion.

.hide {
  opacity: 0;
}

Wenn Sie planen, das Opazitätsattribut zu verwenden, um ein Element vor Bildschirmleseprogrammen zu verbergen, ist dies leider nicht möglich. Denn Screenreader lesen das Element und seinen gesamten Inhalt genau wie jedes andere Element auf der Webseite.

Ich sollte auch erwähnen, dass die Opazitätseigenschaft animiert ist und verwendet wird, um einige tolle Effekte zu erzeugen. Beispiel:

HTML-Code:

<div>1</div>
<div class="o-hide">2</div>
<div>3</div>

CSS-Code:

.o-hide {
  opacity: 0;
  transition: all ease 0.8s;
}

.o-hide:hover {
  opacity: 1;
}

Rendering:

Wenn die Maus darüber bewegt wird Wenn das Element auf dem verborgenen zweiten Block ruht, geht es sanft von vollständig transparent zu vollständig undurchsichtig über. Das Modul setzt außerdem den Cursor:Zeiger, um anzuzeigen, dass es mit ihm interagieren kann.

Sichtbarkeitsattribut

Das Sichtbarkeitsattribut verbirgt das Element, indem es festlegt, ob es sichtbar ist oder nicht. Wenn Sie das Sichtbarkeitsattribut auf „hidden“ setzen, wird unser Element ausgeblendet.

Das Sichtbarkeitsattribut ist dasselbe wie das Deckkraftattribut. Ausgeblendete Elemente wirken sich weiterhin auf das Layout unserer Webseite aus. Der einzige Unterschied besteht darin, dass dieses Mal keine Benutzerinteraktion erfasst wird, wenn der Benutzer ausgeblendet ist. Darüber hinaus wird das Element auch vor Bildschirmleseprogrammen ausgeblendet.

Diese Eigenschaft kann auch animiert werden, solange der Anfangs- und Endzustand unterschiedliche Werte haben. Dadurch wird sichergestellt, dass Übergänge zwischen Sichtbarkeitszuständen fließend und nicht abrupt erfolgen können.

Diese Demo zeigt den Unterschied zwischen Sichtbarkeit und Deckkraft:

HTML-Code:

<div>1</div>
<div class="o-hide"><p>2</p></div>
<div>3</div>

CSS-Code:

.o-hide {
  visibility: hidden;
  transition: all ease 0.8s;
}
.o-hide:hover {
  visibility: visible;
}
.o-hide p {
  visibility: visible;
  margin: 0;
  padding: 0;
}

JS-Code:

var oHide = document.querySelector(".o-hide");
var oHideP = document.querySelector(".o-hide p");
var count = oHideP.innerHTML;

oHide.addEventListener("click", function(){
    count++;
    oHideP.innerHTML = count;
});

Rendering:

Bitte beachten Sie, dass die Nachkommen des Elements, dessen Sichtbarkeit auf ausgeblendet eingestellt ist, weiterhin sichtbar sind, wenn das Attribut explizit auf Sichtbarkeit gesetzt ist. Versuchen Sie, den Mauszeiger über das ausgeblendete Element statt über den inneren Absatz zu bewegen. Sie werden feststellen, dass sich der Cursor nicht in einen Zeiger verwandelt. Wenn Sie außerdem versuchen, auf das Element zu klicken, wird auf Ihren Klick nicht reagiert. Das

-Tag innerhalb des

<div>Hover!</div>
<div class="o-hide"><p>0</p></div>
<div>0</div>

.o-hide {
  display: none;
  transition: all ease 0.8s;
}

.o-hide:hover {
  display: block;
}

.o-hide p {
  display: block;
  margin: 0;
  padding: 0;
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = &#39;<p>&#39; + count + &#39;</p>&#39;;
});

firstDiv.addEventListener("click", function(){
  oHide.style.display = "block";
});

.o-hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.o-hide:hover {
  position: static;
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});

firstDiv.addEventListener("click", function(){
    oHide.style.position = "static";
});

.o-hide {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});


firstDiv.addEventListener("click", function(){
    oHide.className = "";
});