有兩個div,滑鼠划過隱藏div1 顯示div2，滑鼠移開顯示div1隱藏div2，用jq還是css？

個位大神：

有兩個div，正常顯示「aaa」這個div，當滑鼠划過時候，隱藏「aaa」顯示「bbb」這個div，滑鼠移開再恢復原樣。列表一共十條這種新聞，不知道用jquery還是css 能實現這種效果？ 效果圖和代碼見下面，在線等，跪求解決方法！！！！

&

&New Document&

&

&

.list {

float:left;

width:100%;

margin-right:10px;

width:300px;

margin-right:10px

}

.aaa {

font-size:12px;

color:#6b6b6b;

overflow:hidden;

border-bottom:2px dotted #e5e5e5;

padding-top:8px;

}

.bbb {

background-color:#ff0000;

color:#fff;

display:none;

border-bottom:2px dotted #e5e5e5;

}

.on{ display:block;}

.off{ display:none;}

&

&

&

&

新聞111隱藏層內容&

&

&

&&新聞222標題&&

&

&

&

新聞222隱藏層內容&

&

&

&&新聞333標題&&

&

&

&

新聞333隱藏層內容&

&

&

&

&

&
&New Document&
&
& .list {
float:left;
width:100%;
margin-right:10px;
width:300px;
margin-right:10px
}
.aaa {
font-size:12px;
color:#6b6b6b;
overflow:hidden;
border-bottom:2px dotted #e5e5e5;
padding-top:8px;
}
.bbb {
background-color:#ff0000;
color:#fff;
display:none;
border-bottom:2px dotted #e5e5e5;
}
.bbb p{ margin:0; padding:8px 0 0;}
.on{ display:block;}
.off{ display:none;}