Hướng dẫn hidden trong css
Lời nói đầuCó nhiều cách để ẩn một phần tử trong CSS. Bạn có thể ẩn nó bằng cách đặt Bạn có bao giờ tự hỏi tại sao chúng ta có rất nhiều kỹ thuật giấu một phần tử khi tất cả chúng dường như cùng làm một điều tương tự ? Tất cả các phương pháp này thực ra có khác nhau một chút và sự khác biệt này chỉ ra mỗi phương pháp nên được sử dụng trong một trường hợp cụ thể. Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên. Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên. Nội dung1 , OpacityThuộc tính Điều này có nghĩa là cài đặt opacity xuống 0 chỉ giấu đi phần tử một cách trực quan. Phần tử vẫn chiếm vị trí của nó và ảnh hưởng đến bố cục của trang web. Nó cũng sẽ phản hồi lại với tương tác của người dùng.
Nếu bạn định sử dụng thuộc tính opacity để ẩn hoàn toàn khỏi màn hình – thật tiếc, điều này là không thể. Phần tử và tất cả nội dung của nó sẽ vẫn được browser hiển thị (hiển thị trắng), giống như tất cả các phần tử khác trên trang web. Nói cách khác, phần tử vẫn hoạt động (vẫn bắt được các sự tương tác từ user) như cách nó khi chưa bị làm mờ. Chính vì thế tôi khuyến nghị nên sử dụng thuộc tính Hãy xem demo Khi bạn di chuột qua khối thứ hai bị ẩn, phần tử sẽ chuyển đổi trôi chảy từ trạng thái trong suốt hoàn toàn sang rõ ràng. Và khi chuột ko còn ở khối thứ 2 nữa thì khối này bị ẩn đi. Điều này chứng tỏ ràng, khối bị ẩn đi vẫn có thể tiếp nhận các sự tương tác từ user. 2,VisibilityThuộc tính tiếp theo trong danh sách là Cũng giống như thuộc tính Thuộc tính này cũng có thể làm được các hình ảnh động miễn là các trạng thái ban đầu và cuối cùng có các giá trị khác nhau. Điều này bảo đảm rằng quá trình chuyển đổi giữa các trạng thái hiển thị có thể được trơn tru thay vì đột ngột.
Demi sự khác nhau giữa Visibility và Opacity
|