Làm thế nào để làm cho toàn bộ màu sắc thay đổi div trên di chuột bằng cách sử dụng css?

Question

tôi có như sau:

<div id="side-menu" class="sidebar-nav span2"> 
     <div class="sidebar-link"><span>Link 1</span></div> 
     <div class="sidebar-link"><span>Link 2</span></div> 
    </div> 

Tôi đang cố gắng để làm cho mỗi người trong số hai divs thay đổi màu sắc khi bạn di chuột qua chúng - cho dù bạn di chuột qua nội dung của tắt sang bên phải hoặc bên trái của văn bản. Hiện tại, màu chỉ thay đổi nếu tôi di chuột qua văn bản. Bất kỳ ý tưởng làm thế nào điều này có thể được thực hiện? Dưới đây là fiddle tôi với css:

http://jsfiddle.net/PTSkR/56/

Answer 1

Bạn có một không gian trong bộ chọn di chuột. Vấn đề này vì không gian là selector hậu duệ trong CSS

div.sidebar-link :hover{ 
    background-color: #E3E3E3; 
} 

Điều này có nghĩa rằng chỉ dao động hậu duệ của .sidebar-link bị ảnh hưởng bởi các quy tắc. Xóa không gian.

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

Answer 2

Bạn có thể đạt được điều này dễ dàng bằng cách mã sau đây: Link

.cstDiv{ 
 
    padding:10px; /* text-align:center may be used for a good look */ 
 
    width:55px; 
 
} 
 

 
div.cstDiv:hover{ 
 
    background-color:gray;  
 
    color:white; 
 
    cursor:pointer; /* you may delete this if you want */ 
 
}

<div> 
 
     <div class="cstDiv">Link I</div> 
 
     <div class="cstDiv">Link II</div> 
 
     <div class="cstDiv">Link III</div> 
 
     <div class="cstDiv">Link IV</div> 
 
    </div>