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

이상을 사용 : 이미

Answer 3

.box이 div.Content 내에 있지를 선택 했으므로

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

,

그렇게 읽어야합니다

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

아니요?

Answer 4

당신이 hover 사용할 수 있습니다, 당신의 선택은 undefined 반환 : 당신은 다른 선택기를 사용하고

http://jsfiddle.net/Fny4X/