如何在點擊時突出顯示div

Question

我想突出顯示點擊時的div。 繼承人的例子：www.spidex.org 在這個網站上，如果你懸停任何導航按鈕，頁面頂部的div將突出顯示。

Answer 1

在你給出的例子中，當鼠標懸停在超頭的主要導航項目的話，身體會變暗。我同意你的分析，這是與身體的一些封面div管理。 （在本例中使用jQuery），你可能會考慮

一個跨瀏覽器的做法是以下幾點：

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 
    */ 
} 

JavaScript示例：

// 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，你想在mouseover上突出顯示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}); 
    }); 

});