Trạng thái di chuột la bàn hover Trạng thái di chuột

Question

Tôi đang sử dụng la bàn và tôi đã có các vân sam la bàn hoạt động tốt. Trang tải và hình ảnh của tôi xuất hiện bằng cách sử dụng la bàn tạo ra sprite. Câu hỏi của tôi là làm thế nào bây giờ tôi đặt một di chuột trên những? Tôi mới làm quen với la bàn nên tôi không hiểu cách thức này được cho là hoạt động và tài liệu la bàn không giúp tôi.

Answer 1

Vâng, những gì la bàn thực sự lấy tất cả các hình ảnh riêng biệt của bạn, biến chúng thành một hình ảnh và cung cấp cho bạn vị trí nền css cho mỗi biểu tượng để bạn dán vào biểu định kiểu của mình.

Nếu bạn muốn trạng thái di chuột cho các nút của mình, trước tiên bạn cần phải tạo các biểu tượng di chuột. Chúng nên được bao gồm trong sprite đầu tiên (hoặc có thể ở trong một cái khác, miễn là bạn sau đó gọi đúng tệp). La bàn sau đó sẽ cung cấp cho bạn vị trí cho các biểu tượng "trạng thái di chuột" này và tất cả những gì bạn phải làm là sao chép các vị trí đó và dán chúng vào biểu định kiểu css cho trạng thái di chuột của bạn. Ví dụ:

// your normal icon: 
.icon { 
     background-image: url(yourimage.png); 
     background-position:-100px -100px; 
} 

// your hover icon - position for hover state image: 
.icon:hover { 
     background-image: url(yourimage.png); 
     background-position:-200px -100px; 
} 

Answer 2

Thêm dềnh để sprites của bạn là rất dễ dàng, chỉ cần đặt "_hover" (hoặc "_active", hoặc "_target") trong tên tập tin hình ảnh và để la bàn tạo ra các bản đồ sprite cho bạn = D .

Answer 3

Bạn nên tạo tờ ma của bạn bằng tay như thế này ...

$sprite-map: sprite-map("your_sprite_folder_here/*.png") 

i 
    background: $sprite-map 
    display: inline-block 


@each $icon in sprite_names($sprite-map) 
    .icn-#{$icon} 
     background-position: sprite-position($sprite-map, $icon) 
      +sprite-dimensions($sprite-map, $icon) 

Sau đó nói rằng bạn có 2 sprites trong thư mục đó ... cats.png và mèo-hover.png Để sử dụng chúng, bạn sẽ sử dụng một yếu tố i (có thể làm cho này một lớp hoặc bất cứ điều gì bạn muốn)

<i class=".icn-cats"></i> 

Để thêm các di chuột ...

.icn-cats 
    &:hover 
     background-position: sprite-position($sprite-map, cats-hover) 

Tôi gần như tích cực có một cách để tự động tạo ra các nhà nước di chuột nhưng tôi havent thực sự đặt nhiều thời gian vào figuring nó ra.