Làm thế nào để bạn hover css?

Question

Văn bản di chuột (còn được gọi là văn bản chú giải công cụ) được sử dụng để hiển thị các mô tả bổ sung trên phần tử HTML. Văn bản chỉ xuất hiện khi con trỏ chuột di chuyển qua một đối tượng

Nội dung chính Show

Tạo văn bản di chuột bằng cách thêm thuộc tính tiêu đề
Tạo văn bản di chuột bằng HTML và CSS. trước bộ chọn
Tạo nhãn văn bản di chuột thay đổi kích thước động
CSS di chuột hoạt động như thế nào?
Làm cách nào để sử dụng nút Hover Effect trong CSS?
Tại sao CSS hover không hoạt động?

Có hai cách bạn có thể tạo văn bản di chuột cho các phần tử HTML của mình

Thêm thuộc tính toàn cầu

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 cho các thẻ HTML của bạn

Tạo hiệu ứng CSS chú giải công cụ bằng bộ chọn

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

9

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng cả hai phương pháp

Tạo văn bản di chuột bằng cách thêm thuộc tính tiêu đề
Tạo văn bản di chuột bằng HTML và CSS. trước bộ chọn
Tạo nhãn văn bản di chuột thay đổi kích thước động

Hãy bắt đầu với việc tìm hiểu cách tạo văn bản di chuột bằng cách thêm thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 vào các phần tử HTML của bạn

Tạo văn bản di chuột bằng cách thêm thuộc tính tiêu đề

Thuộc tính toàn cầu

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 là một thuộc tính mà bạn có thể thêm vào bất kỳ thẻ HTML hợp lệ nào để cung cấp thêm thông tin về phần tử được thẻ hiển thị

Ví dụ: thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 sau đang được thêm vào cả hai thẻ

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

0 và

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

1

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

Bạn có thể thấy một văn bản di chuột nhỏ được hiển thị khi di chuột qua các thành phần bên dưới

HTML title attribute show up on hover Thuộc tính tiêu đề HTML hiển thị khi di chuột

Như bạn có thể thấy từ ví dụ trên, thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 sẽ được hiển thị khi người dùng di chuột qua các phần tử được hiển thị bằng chuột. Bạn có thể thêm thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 vào bất kỳ phần tử HTML hợp lệ nào

Văn bản di chuột được tạo từ thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 do trình duyệt đặt, điều đó có nghĩa là bạn không thể tùy chỉnh kiểu hiển thị

Nếu bạn muốn một văn bản di chuột trông đẹp hơn, thì bạn cần tạo văn bản của riêng mình bằng CSS

Tạo văn bản di chuột bằng HTML và CSS. trước bộ chọn

Bộ chọn CSS

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

9 tạo và chèn một phần tử giả trước nội dung của phần tử đã chọn, rất phù hợp để thêm hiệu ứng văn bản di chuột cho các phần tử HTML của bạn

Để tạo văn bản di chuột bằng HTML và CSS, trước tiên bạn cần nhóm văn bản hiển thị và văn bản di chuột trong một phần tử vùng chứa

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

Ví dụ trên đặt hover text bên trong thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

6, thay thế nhu cầu sử dụng thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 để lưu trữ hover text

Bây giờ bạn cần thêm kiểu CSS để ẩn văn bản di chuột. CSS sau đây sẽ thực hiện thủ thuật

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8 của phần tử

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

9 sẽ được lấy từ thuộc tính

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

6 như được chỉ định trong phần tử đã chọn

Đầu tiên, thuộc tính

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

1 của bộ chọn

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

2 được đặt thành

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

3 để nó có thể được hiển thị bên ngoài luồng tài liệu

Phần tử

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

3 sẽ được định vị tương ứng với thẻ vùng chứa gần nhất có giá trị

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

5

Đây là lý do tại sao thuộc tính vị trí của

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

6 được thay đổi thành

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

7 để

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

2 sẽ được đặt so với phần tử

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

6

Tiếp theo,

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

80 của

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

2 được đặt thành ẩn để ẩn văn bản.

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

80 sẽ được thay đổi thành

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

83 khi người dùng di chuột qua phần tử

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

6

Phần còn lại của phong cách dành cho

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

2 được sử dụng để cải thiện tính thẩm mỹ của văn bản di chuột

Một giây

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

86 cho độ mờ của phần tử

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

6 được thêm vào để cải thiện tính thẩm mỹ của văn bản di chuột

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

88 được đặt thành

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

89 để văn bản di chuột xuất hiện phía trên văn bản khác

Thuộc tính

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

80 và

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

81 hiển thị các cạnh của phần tử văn bản di chuột

Văn bản di chuột kết quả sẽ được như hình dưới đây

HTML data-hover attribute show up using the CSS Thuộc tính di chuột dữ liệu HTML hiển thị bằng CSS

Bằng cách bọc văn bản di chuột bằng thẻ

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

82, bạn có thể đặt phần tử bên trong thẻ

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

83 hoặc thẻ

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

84

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  span>
body>

8

Tạo nhãn văn bản di chuột thay đổi kích thước động

Cuối cùng, bạn cũng có thể tự động thay đổi kích thước nhãn văn bản di chuột theo kích thước nội dung của mình

Để làm như vậy, bạn cần sử dụng

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

85 làm giá trị của thuộc tính

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

86 trong quy tắc

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

2

Đặt CSS của bạn như sau

<body>
  <h1 title="the message">Hello Worldh1>
  <h2 title="the sender">From Nathanh2>
body>

8

Kết quả sẽ được như hình bên dưới

HTML dynamic hover text size with CSS Kích thước văn bản di chuột động HTML với CSS

Và đó là cách bạn có thể tạo văn bản di chuột bằng CSS và HTML. Bạn có thể tùy chỉnh kiểu CSS ở trên khi cần

Làm thế nào để bạn hover css?

Tạo văn bản di chuột bằng cách thêm thuộc tính tiêu đề

Tạo văn bản di chuột bằng HTML và CSS. trước bộ chọn

Tạo nhãn văn bản di chuột thay đổi kích thước động

CSS di chuột hoạt động như thế nào?

Làm cách nào để sử dụng nút Hover Effect trong CSS?

Tại sao CSS hover không hoạt động?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội