Question

我希望在某些不同的div容器上获得突出显示效果，而网站的其余部分应该在不透明度（包括背景图像）中减弱。有什么想法吗？

为什么这段代码不起作用？尝试了.hover()而不是.mouseover()，但该功能不会对任何输入作出反应......

$(function () {
    $('body').mouseover(function () {
        $('body').prop({
            "background-color": "red";
        });
    });
});

另一种尝试是在html中围绕body标签设置一个框架，然后在悬停框架处于正常状态时将道具设置到该框架但我不知道如何执行此操作。刚开始使用js dev。：）

编辑：失败了......

$(function () {
    $('body').mouseover(function () {
        $('body').css({
            "opacity": "0.3";
        });
    });
});

应该那样...... 任何方式将不透明度应用于背景图像？！

Answer 1

.prop()将设置特定元素的属性。在您的情况下，您必须使用.css()来设置样式。请阅读.prop()和.css()以了解其中的差异。

试试这个，

      $(function(){
            $('body').mouseover(function(){
                $(this).css({"background-color":"red"});
            });
        });

DEMO

Answer 2

fiddle Demo

使用.css()

为匹配元素集设置一个或多个CSS属性。

$(function () {
    $('body').mouseover(function () {
        $(this).css({
            "background-color": "red"
        });
        //or $(this).css("background-color","red");
    });
});

this

<小时/> .prop()

为匹配元素集设置一个或多个属性。

Answer 3

这是 FIDDLE

body {
  background: gray;
  min-height: 1000px; /* For demo purposes */
}

CSS

$(function() {
  $('body').on('mouseover', function() {
    $(this).css({ backgroundColor: 'red' });
  });
});

动画

$(function() {
  $('body').on('mouseover', function() {
    $(this).animate({ backgroundColor: 'red' }, 600);
  });
});

* 注意：由于某些原因，它不适用于jQuery 1.x（边缘）。

Answer 4

我认为这是你可能想要的：一个“昏暗”的DIV元素，在整个页面上添加一个半透明的黑盒子，将自己置于你想要突出显示的DIV“下方”，然后用一些javascript来转动它关闭和打开，并重新排列z索引。 HTML看起来像这样：

this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>

然后是JS：

$('div.dimmable').hover(function() {
    $(this).css('z-index', 101);
    $('#dim')
      .css('z-index', 100)
      .width($(window).innerWidth())
      .height($(window).innerHeight())
      .fadeIn();
}, function() {
    var dimmable = $(this);
    $('#dim').fadeOut({complete: function() {
        dimmable.css('z-index', 99);
    }});
});

您可以看到它正常工作here。

轻微捕获：DIV需要position:relative，否则你无法改变他们的z索引，你不能将它们置于“昏暗”的DIV之上。此外，任何具有更高z-index的东西都不会留在“昏暗”之后，当然，你可以使用更高的数字作为解决方法。

在鼠标悬停时改变身体的css

4 个答案:

DEMO