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

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

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

  
    
      Try hover over me
    
  
  

  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

  
    
      Try hover over me
    
  
  

  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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

0 và

  
    Try hover over me
  

1

  Hello World
  From Nathan

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

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    Try hover over me
  

8 của phần tử

  
    Try hover over me
  

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

  
    Try hover over me
  

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,

  
    Try hover over me
  

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.

  
    Try hover over me
  

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

  
    Try hover over me
  

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

  
    
      Try hover over me
    
  
  

  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

• 
    
      Try hover over me
    
  
  

  88 được đặt thành

  
    
      Try hover over me
    
  
  

  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

  
    Hello World
    From Nathan
  
  

  80 và

  
    Hello World
    From Nathan
  
  

  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

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ẻ

  Hello World
  From Nathan

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

  Hello World
  From Nathan

83 hoặc thẻ

  Hello World
  From Nathan

84

  
    Try hover over me
  

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

  Hello World
  From Nathan

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

  Hello World
  From Nathan

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

  Hello World
  From Nathan

8

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

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

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?

Các bước triển khai hiệu ứng di chuột .

Tạo trang web của bạn

Thêm nút hành động lớn màu xanh của bạn ngay bên dưới phần tử h1

Tạo kiểu cho nút lớn của bạn bằng cách thêm biểu định kiểu. .

Xác định và chọn phần tử sẽ kích hoạt hiệu ứng di chuột. .

Tạo kiểu cho nút của bạn

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

Ngoài ra, di chuột sẽ không hoạt động nếu bạn sử dụng sai định dạng CSS . Lưu ý rằng nếu bạn không hiểu đúng về tính đặc hiệu, kiểu di chuột sẽ không hoạt động.