js中用iterator循环后 mouseover和mouseout只对第一个有变化,其余没有变化

        <script type="text/javascript">

$(document).ready(function(){
$("#name").mouseover(function(){
$("#name").css("background-color","red");
});
$("#name").mouseout(function(){
$("#name").css("background-color","gray");
});
});

为什么只对第一行有变化呢

“#”代表的是id 一个页面里面只能有一个id 换成class=“.”

换成class="name" 把jq里面的$("#name") 换成$(".name")