di chuột với một con thứ n

Question

tôi đã tự hỏi nếu nó có thể sử dụng một di chuột với một con thứ n như vậy

#gallery a img:hover { 
    display: block; 
    height:300px; 
    width:450px; 
    position:absolute; 
    z-index:99; 
    margin-left:-112.5px; 
    margin-top:-75px; 
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); 

} 

Từ này lên đây để một số điều như thế này xuống đây, chỉ có nó không làm việc

#gallery a img:hover:nth-child(1n+4) { 
     display: block; 
     height:300px; 
     width:450px; 
     position:absolute; 
     z-index:99; 
     margin-left:-112.5px; 
     margin-top:-75px; 
     -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); 
     box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); 

    } 

Answer 1

#gallery a:hover:nth-child(1n+4) 

Sẽ hoạt động chính xác nhưng phong cách các thẻ A thay vì IMG bên trong.

Khi bạn có đánh dấu như ...

<a href="#"><img src=""/></a> 
<a href="#"><img src=""/></a> 
<a href="#"><img src=""/></a> 
<a href="#"><img src=""/></a> 
<a href="#"><img src=""/></a> 

Bạn không thể chọn khu vực nội IMG và sau đó cố gắng áp dụng một thứ n con vào nó bởi vì chỉ có 1 IMG bên trong thẻ A.

Tham khảo JSFIDDLE Tôi tạo ra http://jsfiddle.net/fXS93/2/

Bất kỳ sự thay đổi trong cách đánh dấu IMG được bọc sẽ thiết lập lại phù hợp với CSS và tính NTH-CON. Điều này áp dụng ngay cả khi bạn đang kết hợp trên một CLASS mà tất cả các phần của IMG.

Điều này đúng với FF, Chrome và IE9 mới nhất.

Answer 2

bạn đã thử trình duyệt này trong trình duyệt nào? và bạn đã chạy công thức bao nhiêu phần tử? nó sẽ chạy từ phần tử thứ ba trong phần tử cha mẹ của bạn VÀ
bạn nên thêm :hover
sau khi thứ n con như thế này: :nth-child(1n+4):hover
mặc dù nó wont work trong IE8 hoặc sớm hơn
EDIT:
tôi đã thử và thứ tự không ảnh hưởng đến kết quả bạn có thể đặt :hover trước số :nthchild()