如何僅使用 CSS 更改懸停時的內容？-css教學-PHP中文網

如何僅使用 CSS 更改懸停時的內容？

Barbara Streisand

發布： 2024-11-02 19:29:02

原創

920 人瀏覽過

How to Change Content on Hover Using Only CSS?

如何更改懸停時的內容

簡介

懸停效果是一種常用技術，用於提供附加資訊或引起對元素的注意網頁。本文探討了一種簡單而有效的方法，僅使用 CSS 即可在滑鼠遊標懸停在元素上時更改元素的內容。

問題陳述

目標是更改「的內容」當滑鼠遊標停留在「NEW」標籤上時，標籤會變成「ADD」。這應該純粹透過 CSS 來實現，而不使用 JavaScript 或任何其他函式庫。

CSS 內容屬性來救援

CSS 內容屬性，與 ::after 和 ::before 偽類一起引入elements，提供了一種修改元素內容的方法。讓我們利用這個屬性來解決我們的問題：

解決方案

隱藏滑鼠懸停時的原始內容：

<code class="css">.item:hover a p.new-label span {
  display: none;
}</code>

登入後複製

此規則使用顯示：沒有隱藏的屬性當滑鼠遊標停留在.item 上時包含「NEW」內容的元素。

使用::after:

<code class="css">.item:hover a p.new-label:after {
  content: 'ADD';
}</code>

登入後複製

偽- element ::after 用於在.new-label 元素處於懸停狀態時在其後面插入「 ADD”內容。 content 屬性指定新內容。

更新了程式碼

<code class="css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.item {
  width: 30px;
}

a {
  text-decoration: none;
}

.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.label.success {
  background-color: #46a546;
}

.item a p.new-label span {
  position: relative;
  content: 'NEW';
}

.item:hover a p.new-label span {
  display: none;
}

.item:hover a p.new-label:after {
  content: 'ADD';
}
</code>

登入後複製