Question

我想在点击时突出显示div。下面是例子：www.spidex.org 在此网站上，如果您悬停任何导航按钮，则会突出显示页面顶部的div。

Answer 1

使用:hover伪类时，您可以更改元素的外观。

例如

div:hover {
  color: red;
}

其次，您可以使用color属性和背景颜色使用background-color属性更改文本颜色。

两者都显示如下：

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

Answer 2

您可以使用jQuery来实现此目的。

获取jQuery here。

现在考虑您要在鼠标悬停时突出显示一个名为item的div。通过添加叠加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});
   });

});

Answer 3

在您给出的示例中，当您将鼠标悬停在超级标题中的主导航项目上时，主体会变暗。我同意你的分析，这是用身体的一些封面来管理的。

您可能会考虑使用一种跨浏览器的方法（在本例中使用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
});

});

如何在点击时突出显示div

3 个答案: