JQuery選擇器或鼠標懸停問題

Question

我似乎無法看到以下代碼的問題，也許我會失明。

我們改變顏色作品的JavaScript行，但下一行不是我做錯了什麼？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<div class="Generic"> 
    <div class="box"> 

     <div class="Corner"> 
     </div> 


     <div class="headerText"> 
      <h1>text1</h1> 
      <p>text3</p> 
     </div> 


     <div class="Content"> 
      <a href="https://www.mylink.com" title="Sign Up Now">Proceed</a> 
     </div> 

    </div> 

    <p style="float:left; font-weight:bold; padding: 10px; padding-top:35px;">OR</p> 

</div> 

<script type="text/javascript"> 

    $("div.box").mouseover(function() { 
     $("div.Generic div.Content a").css("color", "yellow"); 
     $("div.Generic div.Content .box").css("border", "1px solid black"); 
    }); 

</script> 

Answer 1

看起來你的選擇器倒退了。嘗試這樣的事情，而不是：

$("div.Generic div.box div.Content").css("border", "1px solid black"); 

有一個更好的方式來做到這一點，雖然。試試這個：

$(function() { 
    $(".box").mouseover(function() { 
     $(this).find(".content").css("border", "1px solid black"); 
     $(this).find(".content a").css("color", "yellow");   
    }); 
});​ 

Answer 2

或只使用：

$("div.box").mouseover(function() { 
     $("div.Generic div.Content a").css("color", "yellow"); 
     $(this).css("border", "1px solid black"); 
    }); 

，因爲你已經選擇了它

Answer 3

.box的不在範圍div.Content，

所以它應該閱讀：

$("div.Generic .box").css("border", "1px solid black");

不是？

Answer 4

你可以使用hover，你的選擇返回undefined：

http://jsfiddle.net/Fny4X/