Jquery中的简单测试不起作用.绿色方块没有显示出来

simple test in Jquery isn't working. green square doesn't show

本文关键字：方块 显示 简单 测试 不起作用 Jquery      更新时间：2023-09-26

当鼠标在红色方块上时，绿色方块应该显示出来，但它没有。下面是代码:

 <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();
    });
});
http://jsfiddle.net/karim79/EkA6p/1/

应该是$(" a")。选择器需要一个句号。如果你有id="a"那么你会使用("#a")，但只是做$("a")实际上会选择所有的链接，即<a href="">

http://jsfiddle.net/hZL94/

您需要设置类别.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>

这是因为您尝试选择<a>和<b>元素，而不是<div class="a">和<div class="b">元素。$('.a')而不是$('a')。看到 jsFiddle 。

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

try this

<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>
相关文章：