为什么鼠标经过换色区域 没有效果。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="application/javascript">
$(".ddd").hover(
  function () {
    $(this).css({"background-color":"red","font-size":"200%"});  }, 
  function () {
     $(this).css({"background-color":"red","font-size":"200%"});  }
);</script>
</head><body>
<div style="width:500px; height:200px;  position:relative; background:#C30;">
<div style="width:250px; height:200px; position:absolute; left:0px; top:0px; background:#000; z-index:9;"></div>
<div style="width:250px; height:100px; position:absolute; left:100px; top:55px; background:#00F;">
<a style="width:230px; height:60px; position:absolute; left:100px; top:0px; background:#FF0; z-index:9999; display:block; " class="ddd"></a>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    你的script执行时后面的元素还没加载，所以事件是没有绑定到的，这样就可以了<script type="application/javascript">
    $(document).ready(function() {$(".ddd").hover(
      function () {
        $(this).css({"background-color":"red","font-size":"200%"});  }, 
      function () {
         $(this).css({"background-color":"red","font-size":"200%"});  }
    );});</script>
      

  2.   

    $(function(){
     $(".ddd").hover(
      function () {
        $(this).css({"background-color":"red","font-size":"200%"});  }, 
      function () {
         $(this).css({"background-color":"red","font-size":"200%"});  }
    );
    })
      

  3.   

    楼主你的问题不仅是没将脚本加载
    还有
    <script type="application/javascript">
    换成
    <script type="text/javascript"><script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
    $(".ddd").hover(
    function () {
    $(this).css({"background-color":"red","font-size":"200%"});
    }, 
    function () {
    $(this).css({"background-color":"blue","font-size":"50%"});
    }
    );
    });
    </script>
    <a style="width:230px; height:60px; position:absolute; left:100px; top:0px; background:#FF0; z-index:9999; display:block; " class="ddd">123</a>