Làm thế nào để Tạo Simple Css Hình Rollover Effect
Một vài ngày trước, tôi đã được thực hiện hiệu ứng Rollover Image trong một trang web tôi là làm việc trên. Hầu hết các trang web đang sử dụng danh mục đầu tư hiệu quả hình ảnh rollover. Trong bài này tôi sẽ hướng dẫn bạn tìm hiểu làm thế nào để tạo hiệu ứng rollover Css đơn giản, hình ảnh. Tôi đang sử dụng chỉ có một đơn giản đồ họa. Phần còn lại là cơ bản CSS phong cách, với mã HTML đơn giản.

Tròn biên giới bất động sản này không được hỗ trợ bởi trình duyệt IE xem Demo.
cho chúng tôi biết suy nghĩ của bạn? Nếu bạn tìm thấy bất kỳ hướng dẫn khác mà bạn muốn chia sẻ với chúng tôi, hãy cho chúng tôi biết bằng cách thả trong một chú thích.
Ví dụ:
Bước 1 Css Cơ cấu tổ chức
lần đầu tiên chúng tôi tạo một đơn giản Css mã
; margin : 0 ; } * (Padding: 0; margin: 0;) % normal Arial, Helvetica, sans-serif ; } body (font: 100% bình thường Arial, Helvetica, sans-serif;). rollover_img ( ; width: 280px; ; height: 150px; ( land .jpg ) ; background-image: url (đất jpg).; ; background-position: top; -moz-border-radius: 10px; -webkit-border-radius: 10px; #ccc ; border: 10px solid # ccc; Arial, Helvetica, sans-serif ; font: normal 13px Arial, Helvetica, sans-serif; line-height: 18px; float: left; 0 ; margin: 0 10px 10px 0; )rollover_img một. ( ; color: # fff; ; width: 280px; ; height: 150px; ; display: block; ; text-decoration: none; ){ rollover_img a: hover. ( ; background: # 000; opacity:. 60; opacity= 60 ) ; filter: alpha (opacity = 60); ). rollover_img một khoảng ( ; display: none; ; width: 280px; padding: 5px; )span { rollover_img span hover một: (. ; display: block; )
Bước 2 Html Cơ cấu tổ chức
bây giờ chúng tôi tạo một đơn giản Html mã
> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div class = "rollover_img"> <a Tiêu đề = "Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. Trong volutpat. Vestibulum elit. Aenean eget enim vitae bibendum pellentesque tellus. Sed tại văn bản Ví dụ ước tính, Công ty Cổ elit dolor sit amet, consectetur adipiscing </. span> </ a> </ div>
Xem Demo
Theo chúng tôi trên Twitter, hoặc đăng ký với thiên đường phát triển + RSS Feed cho các hướng dẫn phát triển web tốt nhất trên web.
Bài viết liên quan:
nếu bạn rất thích đọc bài viết này, xin vui lòng kiểm tra các sản phẩm khác liên quan dưới đây:






















































Codesquid nói trên: ngày 13 tháng 2 năm 2010 at 10:12 Said:
Thực sự hiệu quả tốt đẹp! Hướng dẫn, tốt!
Codesquid's blog cuối .. Flags của thế giới chỉ sử dụng XHTML và CSS
favSHARE nói trên: ngày 13 Tháng Hai 2010 at 11:51 Said:
Bài viết này đã được chia sẻ trên favSHARE.net. Đi và bình chọn nó!
blog cuối favSHARE của .. 5 Apps iPhone Mỗi Designer Web nên có