div에서 강조 표시하는 방법

Question

클릭하면 div가 강조 표시됩니다. 예를 들자면 : www.spidex.org 이 웹 사이트에서는 탐색 버튼 중 하나를 가리키면 페이지 상단의 div가 강조 표시됩니다.

Answer 1

를 사용하고 몸은 어두워집니다. 나는 당신의 분석에 동의한다. 이것은 신체의 일부 표지로 관리된다.

예 HTML :

<div class="header"> 
    <a href="#">Some Link</a> 
</div> 
<div class="body"> 
    <div class="body-content"> 
     [ CONTENT HTML ] 
    </div> 
    <div class="body-cover"></div> 
</div> 

예를 들어, CSS :

.body { 
    position: relative; /* container needs position */ 
} 
.body-cover { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background-color: blue; 
    /* 
    you could use a sligtly transparent background here, 
    or tween your opacity in your javascript 
    */ 
} 

예 자바 스크립트 당신이 고려해 볼 수 있습니다 (이 예에서는 jQuery를 사용하여)

한 크로스 브라우저 방식은 다음과 같은 것 :

// on dom ready 
jQuery(function ($) { 

// closures 
var $links = $('.header a'); 
var $body = $('.body'); 
var $content = $body.find('.body-content'); 
var $cover = $body.find('.body-cover'); 
var sCoverHiddenCssClassName = 'body-cover-hidden'; 
var sCoverTweeningCssClassName = 'body-cover-tweening'; 
var sCoverShowingCssClassName = 'body-cover-showing'; 

// closure methods 
var fMouseOver = function() { 
    // check to see if hidden (not already tweening or showing) 
    if ($cover.hasClass(sCoverHiddenCssClassName)) { 
     // check content, may have changed. 
     $cover.css({ 
      height: $content.outerHeight(), 
      width: $content.outerWidth() 
     }); 
     // animate or tween cover (do this however you want) 
     $cover 
      .removeClass(sCoverHiddenCssClassName) 
      .addClass(sCoverTweeningCssClassName) 
      .fadeIn(function() { 
       // when completed, mark as showing/visible 
       $cover 
        .removeClass(sCoverTweeningCssClassName) 
        .addClass(sCoverShowingCssClassName); 
      }); 
    } 
}; 
var fMouseOut = function() { 
    // check to see if visible (not already tweening or hidden) 
    if ($cover.hasClass(sCoverShowingCssClassName)) { 
     // animate or tween cover (do this however you want) 
     $cover 
      .removeClass(sCoverShowingCssClassName) 
      .addClass(sCoverTweeningCssClassName) 
      .fadeOut(function() { 
       // when completed, mark as showing/visible 
       $cover 
        .removeClass(sCoverTweeningCssClassName) 
        .addClass(sCoverHiddenCssClassName); 
      }); 
    } 
}; 
var fClick = function (e) { 
    // prevent default if needed for anchors or submit buttons 
    // e.preventDefault(); 
    if ($cover.hasClass(sCoverHiddenCssClassName)) { 
     fMouseOver(); 
    } 
    else if ($cover.hasClass(sCoverShowingCssClassName)) { 
     fMouseOut(); 
    } 
}; 


// init interaction 
$cover.hide().addClass(sCoverHiddenCssClassName); 
$links.each(function() { 
    // wire links 
    jQuery(this) 
     .mouseover(fMouseOver) 
     .mouseout(fMouseOut);// 
     //.click(fClick); // use click event if desired 
}); 

}); 

Answer 2

:hover 가상 클래스를 사용하여 마우스를 가져 왔을 때 요소 모양을 변경할 수 있습니다.

div:hover { 
    color: red; 
} 

두 번째 예를 들어

, 당신은 color 속성과 background-color 속성을 사용하여 배경 색상을 사용하여를 통해 텍스트의 색상을 변경할 수 있습니다.

두

은 다음과 같습니다 :

는

div:hover { 
    color: black; 
    background-color: white; 
} 

Answer 3

이를 달성하기위한 jQuery를 사용할 수 있습니다.

get jQuery here.

이제 마우스 오버시 강조 표시 할 div가 item 인 것으로 간주합니다. 오버레이 div를 추가하면됩니다. 당신은 슈퍼 헤더의 기본 탐색 항목 위에 마우스를 올려 때

div.overlay{ 
    opacity:0; 
    background:#000; 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:50px;left:0; 
} 

다음, 당신의 주어진 예에서 JQuery와에게

jQuery(document).ready(function($){ 
    $('.item').mouseover(function(){ 
     $('.overlay').css({opacity:0.3}); 
    }); 

});