thay đổi li trên một: hover

Question

Tôi có một menu: (. chứa góc tròn ở phía dưới)

<div id=menu> 
    <ul=navigation> 
    <li><a href=>Home</a></li> 
    </ul> 
</div> 

Với cửa trượt kỹ thuật tôi muốn tạo nút của tôi

tôi có thể làm việc này, bằng cách di chuyển a và li. Nhưng li là lớn hơn, và nếu tôi di chuột qua li, mà không lơ lửng a, chỉ hình nền cho các chương trình li.

Bây giờ tôi tự hỏi nếu có một cách để kết nối di chuột của li và di chuột của một trong css. Tôi thay vì sửa chữa vấn đề này mà không cần sử dụng javascript.

Googleing đã không giúp tôi thêm. Tôi đoán điều này là không thể, nhưng tôi muốn chắc chắn trước khi thử các tùy chọn khác.

Cảm ơn trước vì bất kỳ lời khuyên/trợ giúp/đề xuất nào.

Answer 1

Từ những gì tôi thu thập bạn không thể làm những gì bạn đang sau trong cách bạn đã mô tả nó. Tuy nhiên những gì tôi sẽ làm là làm cho "một thẻ" hiển thị dưới dạng khối và đặt chiều rộng và chiều cao để điền vào "LI" theo cách bạn có thể sử dụng: di chuột và thay đổi toàn bộ bg mà làm cho nó trông giống như LI đang thay đổi

 

li a { 
    background:#000 url(images/bg.png) no-repeat 0 0; 
    display:block; 
    height:20px; 
    width:100px; 
} 
li a:hover { 
    background:#fff url(images/bg.png) no-repeat 0 -20px; 
} 
 

cũng sử dụng một số đệm ngồi văn bản ở đúng nơi trong phạm vi "LI" và loại bỏ bất kỳ đệm khỏi "LI"

li: hover không được hỗ trợ mà không JS ở cũ phiên bản của IE để sử dụng: hover thay vì cung cấp khả năng tương thích trình duyệt chéo tốt hơn

Answer 2

Bạn có thể làm điều này đơn giản với:

<div id=menu> 
    <ul> 
    <li><a href=>Home</a></li> 
    </ul> 
</div> 

Sau đó, trong CSS của bạn:

#menu ul li:hover{ 
    background-image:url(newimage); 
} 

Nếu bạn cần IE6 tuân thủ, chỉ cần tạo liên kết của bạn lấp đầy toàn bộ chiều rộng của của UL.

#menu ul li a:link, #menu ul li a:visited{ 
    display:block; 
    width:999px; <-- enter pixels 
    height:999px; <-- enter pixels 
} 

sau đó sửa đổi hình nền bình thường với:

#menu ul li a:hover{ 
    background-image:url(newimage); 
} 

Answer 3

#menu li { 
    /* normal li style */ 
} 

#menu li a { 
    /* normal a style */ 
} 

#menu li:hover { 
    /* hover li style */ 
} 

#menu li:hover a { 
    /* hover a style */ 
} 

sẽ không làm việc với IE6 ...