Javascript Jquery中的简单测试是'；不起作用。绿色广场不'；不显示_Javascript_Jquery_Html_Css

Javascript Jquery中的简单测试是'；不起作用。绿色广场不'；不显示

javascript jquery html css

Javascript Jquery中的简单测试是'；不起作用。绿色广场不'；不显示,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好的，当你的鼠标在红场上时，绿色的方块应该显示出来，但是它没有。代码如下： <html> <head> <script type="text/javascript"

好的，当你的鼠标在红场上时，绿色的方块应该显示出来，但是它没有。代码如下：

 <html>                                                                  
     <head>                                                                  
         <script type="text/javascript" 
            src="jquery-1.6.2.min.js"></script>

         <script type="text/javascript">                                         
         <!--
             $(document).ready(function() {
               $("a").bind("mouseover", 
                function(){
                    $("b").css("display", "block");
               });

               $("a").bind("mouseout", 
                function(){
                    $("b").css("display", "none");
               });
             });
         -->                                   
         </script>                                                               
         </head>                                                                 
     <body>                                                                  
        <div class="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
        <div class="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>

     </body>                                                                 
 </html>

在每个选择器前面放一个点，形成一个类选择器：

$(".a").bind("mouseover", 
                function(){
                ...

您的代码可以简化为：

$(document).ready(function() {
    $(".a").hover(function() {
        $(".b").toggle();
    });
});

应为$（“.a”）。选择器需要一个句点。如果您有id=“a”，那么您将使用（“#a”），但只要执行$（“a”）将实际选择所有链接，即

您需要设置类.a
.b

<script type="text/javascript">                              
     $(document).ready(function() {
        $(".a").bind("mouseover", 
        function(){
            $(".b").css("display", "block");
       });

       $(".a").bind("mouseout", 
        function(){
            $(".b").css("display", "none");
       });
     });                             
</script>  


$（文档）.ready（函数（）{
$（“.a”）.bind（“鼠标悬停”，
函数（）{
$（“.b”）.css（“显示”、“块”）；
});
$（“.a”）.bind（“mouseout”，
函数（）{
$（“.b”）.css（“显示”、“无”）；
});
});                             
这是因为您尝试选择
$(document).ready(function() {
    $(".a").bind("mouseover", function() {
        $(".b").css("display", "block");
    });

    $(".a").bind("mouseout", function() {
        $(".b").css("display", "none");
    });
});

试试这个
<html>                                                                  
     <head>                                                                  
         <script type="text/javascript" 
            src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

         <script type="text/javascript">                                         
             $(document).ready(function() {
               $("#a").bind("mouseover", 
                function(){
                    $("#b").css("display", "block");
               });

               $("#a").bind("mouseout", 
                function(){
                    $("#b").css("display", "none");
               });
             });                         
         </script>                                                               
         </head>                                                                 
     <body>                                                                  
        <div id="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
        <div id="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>

     </body>       
     </html>


$（文档）.ready（函数（）{
$（“#a”）.bind（“鼠标悬停”，
函数（）{
$（“#b”）.css（“显示”、“块”）；
});
$（“a”）.bind（“mouseout”，
函数（）{
$（“#b”）.css（“显示”、“无”）；
});
});