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

-Tags erfasst weiterhin alle Mausereignisse. Wenn Sie mit der Maus über den Text fahren, wird das

selbst sichtbar und beginnt, auf Ereignisse zu reagieren.

Anzeigeattribut

Das Anzeigeattribut verbirgt das Element wirklich, indem es den Wert „Keine“ ausblendet, um sicherzustellen, dass es nicht generiert wird all. Box-Modell; und mit dieser Eigenschaft bleibt beim Ausblenden des Elements kein Leerraum übrig. Darüber hinaus ist keine direkte Benutzerinteraktion möglich, solange die Anzeige auf „Keine“ eingestellt ist. Darüber hinaus lesen Bildschirmleseprogramme den Inhalt des Elements nicht. Es ist, als ob das Element nicht existiert.

Allerdings werden auch alle Nachkommen unseres Elements ausgeblendet. Diese Eigenschaft kann nicht animiert werden, daher sind Übergänge zwischen Zuständen immer abrupt.

Bitte beachten Sie, dass dieses Element weiterhin über das DOM zugänglich ist. Sie können es wie jedes andere Element bearbeiten. Beispiel:

HTML-Code:

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

CSS-Code:

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

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

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

JS-Code:

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

Rendering:

Sie können sehen, dass der zweite Block einen p-Absatz enthält, dessen Anzeigeattribut auf „Block“ gesetzt ist, der Absatz jedoch immer noch unsichtbar ist. Dies ist ein Unterschied zwischen Visibility: Hidden und Display: None. Im ersten Fall werden alle Nachkommen, die die Sichtbarkeit explizit auf „sichtbar“ setzen, sichtbar, dies geschieht jedoch nicht in der Anzeigeeigenschaft. Nach dem Festlegen von display: none werden alle Nachkommen ausgeblendet, unabhängig von ihrem Anzeigewert.

Bewegen Sie nun den Mauszeiger ein paar Mal über den ersten Block der Demo. Schon mal gewandert? Klicken Sie auf den ersten Block. Dadurch sollte der zweite Block sichtbar sein. Die darin enthaltene Anzahl sollte jetzt eine Zahl ungleich Null sein. Denn auch Elemente, die dem Benutzer verborgen bleiben, können mit JavaScript

noch manipuliert werden

position属性

假设你有一个要与之交互的元素，但又不希望它影响网页布局。到目前为止，没有任何属性可以正确处理这种情况。在这种情况下，你可以做的一件事，那就是将元素移出视图窗口。这样它不会影响布局，仍然可以操作。

以下演示说明绝对定位如何隐藏元素和工作方式与上一个演示大致相同（html代码一样）：

css代码：

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

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

js代码：

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

效果图：

这里的主要思想是将负的顶部和左侧值设置得足够高，以使元素在屏幕上不再可见。该技术的一个好处（或潜在的缺点）是屏幕阅读器可以读取绝对定位元素的内容。这是完全可以理解的，因为你只将元素移出视图窗口，以便用户无法看到它。

你应该避免使用此方法隐藏任何可以获得焦点的元素，因为当用户关注该元素时会导致意外跳转。此方法经常用于创建自定义复选框或单选按钮。

clip-path属性

隐藏元素的另一种方法是剪切它们。以前，这可以通过clip属性来完成，但是已经弃用了有利于更好的属性clip-path。

请注意，IE或Edge尚未完全支持下面clip-path属性值的使用。这是一个展示它的示例演示：

css代码：

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

js代码：

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 = "";
});

效果图：

如果将鼠标悬停在第一个元素上，它仍然可以影响第二个元素，即使它被clip-path属性隐藏。如果单击该元素，它将删除隐藏的类以显示我们一直存在的元素。这个文本仍然可以被屏幕阅读器阅读。

即使我们的元素不再可见，它周围的元素仍然表现得像它原来的矩形尺寸。请记住，在悬停区域之外，像悬停或点击等用户交互是不可能的。在我们的例子中，这意味着用户将无法直接与隐藏元素交互。此外，该属性能够以各种方式被动画化以产生新的效果。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

Das obige ist der detaillierte Inhalt vonSo verbergen Sie CSS-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!