Question

好吧，所以当你的鼠标在红色方块上时，绿色正方形会显示，但事实并非如此。这是代码：

 <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>

Answer 1

在每个选择器前放置一个点以形成类选择器：

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

您的代码可以简化为：

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

http://jsfiddle.net/karim79/EkA6p/1/

Answer 2

应为$（“。a”）。选择器需要一段时间。如果您有id =“a”，那么您将使用（“#a”），但只需执行$（“a”）将实际选择所有链接，即<a href="">

http://jsfiddle.net/hZL94/

Answer 3

您需要设置课程.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>

Answer 4

这是因为您尝试选择<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");
    });
});

Answer 5

试试这个

<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>

Jquery中的简单测试不起作用。绿色广场没有显示

5 个答案: