在jquery中進行簡單測試不起作用。綠色方塊不顯示

好的，所以綠色方塊假設當鼠標在紅色方塊上時顯示，但不是。下面是代碼：在jquery中進行簡單測試不起作用。綠色方塊不顯示

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

來源

2011-08-13 CyanPrime

加一個點每一個選擇之前形成類選擇：

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

您的代碼可以減少到這一點：

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

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

來源

2011-08-13 06:20:15 karim79

謝謝。^_ ^我會盡快接受它。 – CyanPrime

應該是$（「。a」）。選擇器需要一段時間。在哪裏，如果你有ID =「A」，那麼你可以使用（「＃A」），但只是做$（「A」）將實際選擇的各個環節，即<a href="">

http://jsfiddle.net/hZL94/

來源

2011-08-13 06:21:37 Matt

您需要設置類.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>

來源

2011-08-13 06:21:40

代替<div class="a">和<div class="b">元素這是becasue您儘量選擇<a>和<b>元素。 $('.a')而不是$('a')。見jsFiddle。

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

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

來源

2011-08-13 06:22:57

-1

試試這個

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

來源

2011-08-13 06:25:34 virlan2004

他們是沒有ID的類 –

在jquery中進行簡單測試不起作用。綠色方塊不顯示

回答

相關問題