Trang tính kiểu xếp tầng (CSS) được thiết kế bằng cách sử dụng hoặc định dạng XML (bao gồm XHTML, SVG). Nó là một ngôn ngữ bảng định kiểu chủ yếu được sử dụng để mô tả các phần tử thông qua một loạt các phương pháp định dạng. Một trong những phương pháp là di chuột và trong bài viết này, chúng ta sẽ hiểu Hover trong CSS theo cách sau:

• Hover trong CSS là gì?
• Hover được sử dụng ở đâu?
• Hover làm gì?
• Khả năng tương thích
• Làm thế nào nó hoạt động?
• Thay đổi màu nền của Di chuột thành “Đỏ”
• Tạo Độ mờ của Di chuột trên Hình ảnh
• Tạo lớp phủ văn bản trên hình ảnh

Hover trong CSS là gì?

CSS hover là một thành phần bộ chọn được sử dụng để tạo kiểu cho các phần tử khác nhau khi con trỏ chuột di chuột qua chúng. Chúng có thể được sử dụng trên hầu hết mọi phần tử HTML. Tính năng di chuột trong CSS có tầm quan trọng đáng kể trong thiết kế trang web.

Thành phần di chuột có thể đánh dấu, mã hóa và tùy chỉnh các trang web theo sở thích của người dùng trong một chương trình thiết kế web nhỏ gọn và hiệu quả.

Hover được sử dụng ở đâu?

Các ví dụ phổ biến nhất về khả năng tồn tại của tính năng di chuột có thể được nêu bật trên các trang web mua sắm lớn như Flipkart và Amazon. Khi người dùng di chuột vào bất kỳ sản phẩm nào trên các trang web thương mại điện tử này, sản phẩm được lập trình để thực hiện chức năng di chuột thu phóng tự động nhằm cung cấp cho khách hàng cái nhìn tốt hơn về các sản phẩm đã chọn của họ. Thông qua lập trình này, trang web được thiết kế để hiển thị một cái nhìn nhỏ gọn về toàn bộ phạm vi sản phẩm kèm theo cái nhìn chi tiết về sản phẩm quan tâm trong một thiết kế trang web duy nhất.

chuyển đổi kiểu trong c ++

Hover làm gì?

Di chuột là một công cụ lập trình đa chức năng, qua đó người dùng có thể tùy chỉnh phần tử mục tiêu với vô số tiêu chí định dạng. Một số trường hợp về bí quyết hoạt động của tính năng di chuột bao gồm:

• Thay đổi màu nền / phông chữ
• Nhúng văn bản ẩn hiển thị trên di chuột
• Tạo hiệu ứng cuộn qua trên hình ảnh
• Tự động thu phóng văn bản / hình ảnh
• Sửa đổi độ mờ của hình ảnh
• Nhúng văn bản
• Hoán đổi hình ảnh
• Div. Bay lượn
• Nhiều hoạt động định dạng di chuột qua CSS khác.

Hiệu ứng di chuột về cơ bản sửa đổi giá trị thuộc tính của một phần tử để kích hoạt các thay đổi đối với văn bản / hình ảnh đã nêu hoặc các phần tử tương ứng. Việc nhúng các phần tử di chuột qua CSS trong thiết kế trang web sẽ biến một trang web thông thường thành một trang web tương tác, mạnh mẽ và có chức năng cao. Các thiết kế trang web này thân thiện với người dùng và toàn diện. Các trang web được thiết kế theo kiểu di chuột có sức hấp dẫn người tiêu dùng cao hơn và chúng thu hút sự chú ý của khách hàng tiềm năng.

Khả năng tương thích của Hover trong CSS

Tính năng di chuột tương thích với tất cả các trình duyệt web chính. Tuy nhiên, việc triển khai yếu tố này trên các thiết bị cảm ứng vẫn là một nhiệm vụ đầy thách thức. Di chuột trong CSS cho phép khả năng truy cập nội dung trên các thiết bị không hỗ trợ chức năng di chuột. Người ta đã quan sát thấy rằng một chức năng di chuột được kích hoạt trên thiết bị không hỗ trợ có thể bị kẹt trên thiết bị.

Do đó, việc hiển thị nội dung quan trọng quan trọng bị chặn do vấn đề định dạng. Mặt khác, khi phần tử di chuột trong chương trình CSS đóng góp một mức độ cá nhân hóa hiệu quả cao cho các trang web, ngược lại, khả năng hoạt động của nó trên các thiết bị di động là không hoạt động. Phù hợp với hoàn cảnh mà thế giới công nghệ thông tin đang phát triển về cơ bản là tính di động, tính năng di chuột có nguy cơ trở nên lỗi thời với những tiến bộ công nghệ. Do đó, nhu cầu chế tạo một tính năng nhúng di động hoạt động với thiết bị cảm ứng và di động là vô cùng quan trọng.

Hover hoạt động như thế nào trong CSS?

Kiểu lớp giả hoạt động chiếm ưu thế trong định dạng di chuột qua CSS và nó ghi đè bất kỳ / tất cả các liên kết tiếp theo được theo sau bởi lớp giả này. Ví dụ: trong lớp giả “: link: đã thăm hoặc: hoạt động, quy tắc: hover cần được đặt sau: liên kết và: đã thăm nhưng trước: hoạt động cho phù hợp: kiểu di chuột. Thứ tự LVHA:: liên kết,: hover,: đã thăm và: đang hoạt động được sử dụng làm tham chiếu cho kiểu định dạng: di chuột thích hợp.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Kiểm tra Di chuột!Mã ẩn hiển thị khi di chuột

Trong đoạn mã trên, phần tử span được sửa đổi để hợp nhất phần tử di chuột và div bằng cách sử dụng phần tử span: hover + div. Phần tử span sẽ hiển thị trên trang đích chính sẽ hiển thị văn bản 'Kiểm tra khi di chuột!' Di chuột hơn nữa trên phần tử span sẽ hiển thị phần tử div 'Mã ẩn hiển thị khi di chuột'. Định dạng nhúng này hoạt động trên văn bản cũng như hình ảnh.

sắp xếp các thuật toán c ++

Thay đổi màu nền của Di chuột thành “Đỏ”

p: hover, h1: hover, a: hover {background-color: Red}
Di chuột màu đỏ
 
Di chuột màu đỏ
 
Liên kết:
 
Thử nghiệm di chuột màu đỏ:
  Google com  
  Ghi chú: xin chào
 

Đoạn mã trên tùy chỉnh

,

và và tích hợp chúng vào một chức năng di chuột chung. Mã này được thiết kế để thay đổi màu văn bản thành màu đỏ khi con trỏ chuột di chuột qua chúng. Thành phần h1 và h2 lần lượt hiển thị “CSS: Hover Test Code” và “Hover Red”. Phần tử đoạn văn: Hover Test Red và thẻ neo: google.com được đánh dấu màu đỏ khi con trỏ chuột di chuột qua chúng.

Tạo Độ mờ của Di chuột trên Hình ảnh

.pic {width: 1900px height: 1900px opacity: 1 filter: alpha (opacity = 100) background: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opacity: 0.2 filter: alpha (opacity = 30)}

Chương trình CSS ở trên hiển thị sửa đổi độ mờ của hình ảnh khi di chuột. Độ mờ ban đầu của hình ảnh là một tuy nhiên, việc sử dụng bộ lọc di chuột qua độ mờ tương tự đã được sửa đổi thành 0,2. Mã này hiển thị rằng bằng cách sử dụng phần tử di chuột, người ta có thể sửa đổi độ mờ của hình ảnh và / hoặc văn bản.

Tạo lớp phủ văn bản trên hình ảnh

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Màu cam là một sợi trái cây phong phú. Các chất chống oxy hóa có trong cam có thể hỗ trợ tiêu hóa, làm sáng da và hoạt động như một yếu tố chống lão hóa.

Phân lớp văn bản trong CSS hover là một công cụ hiệu quả để nhúng văn bản mô tả của hình ảnh vào chính hình ảnh đó. Công cụ này hỗ trợ cung cấp một cái nhìn tổng quan nhỏ gọn về hình ảnh mà không chiếm không gian không hoạt động trong không gian thiết kế web hạn chế. Trong mã này, hình nền được nhúng với văn bản mô tả sẽ hiển thị khi con trỏ chuột di chuột qua văn bản.

Điều này kết luận tất cả các khía cạnh quan trọng của di chuột trong CSS và làm nổi bật khả năng sử dụng của nó trong phát triển web. Có rất nhiều hiệu ứng đặc biệt mà nó có thể mang lại cho các trang web của chúng tôi. Chúng tôi luôn có thể thử các kết hợp khác nhau của bộ chọn di chuột với các thuộc tính CSS khác như hoạt ảnh, hình nền, siêu liên kết, v.v. và khám phá tiềm năng của nó như chúng ta đã thấy trong một số ví dụ của chúng tôi. Cuối cùng, CSS là một trong những cách mạnh mẽ nhất để thiết kế và chuyển đổi trang web và do đó các nhà phát triển web sắp có được kỹ năng này để xây dựng các trang web động.

Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Di chuột trong CSS” và chúng tôi sẽ liên hệ lại với bạn.