jQuery를 사용하여 마우스 오버 시 히트 및 다른 동일 수준 요소가 어둡게 만드는 효과

이 예제에서는 jQuery를 사용하여 마우스 오버 시 강조 표시하고, 다른 동일 수준 요소를 어둡게 표시하는 방법을 설명합니다. 여러분과 공유하고, 구체적인 내용은 다음과 같습니다：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="keywords" content="키워드1키워드2키워드3그런 것들"/>
    <title>마우스 오버 시 강조 표시, 다른 것들은 어둡게 표시</title>
    <style type="text/css">
      *{margin:0; padding:0;}
      ul,li{list-style:none;}
      ul{width:900px; height:200px; margin:100px auto;}
      li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;}
      .addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $(".index_Img").hover(function(){
           $(this).siblings().find(".addblack").show();
           },function(){
             $(this).siblings().find(".addblack").hide();
             $(this).find(".addblack").hide();
         }
      }
    </script>
  </head>
  <body>
    <ul>
      <li class="index_Img">
        사과
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        바나나
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        포도
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        딸기
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
    </ul>
  </body>
</html>

운영 결과 그림은 다음과 같습니다：

jQuery 관련 내용에 대해 더 알고 싶은 독자는 다음과 같은 사이트의 특집을 확인할 수 있습니다：《jQuery 전환 효과 및 기술 요약》、《jQuery 탐색 알고리즘 및 기술 요약》、《jQuery 확장 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery 휰처링 효과 및 기술 요약》、《jQuery 테이블(table) 작업 기술 요약》、《jQuery 중 Ajax 사용 요약》、《jQuery 일반 클래식 효과 요약》、《jQuery 애니메이션 및 효과 사용 요약》 및 《jQuery 선택자 사용 요약》

이 문서에 설명된 내용이 모두들이 jQuery 프로그램 설계에 도움이 되길 바랍니다.

성명: 이 문서의 내용은 인터넷에서 가져온 것으로, 저작권자는 모두입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 것으로, 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집한 것이 아니며, 관련 법적 책임을 부담하지 않습니다. 저작권 내용이 의심되는 경우, notice#w로 이메일을 보내 주세요.3codebox.com에 대한 신고를 보내는 경우, #을 @으로 변경하십시오. 관련 증거를 제공하고, 실제로 확인되면, 이 사이트는 즉시 의심스러운 저작권 내용을 제거합니다.

기본 가이드

당신이 좋아할 만한 것