Question

当鼠标悬停在子元素上时，我正在更改父div的背景。这应该只适用于720px及更大的屏幕尺寸，所以我使用它：

if ($(window).width() > 720) {
    $('div a').hover(
        function () {
            $('div').css("background-image", 'url(image-hover.png)');
        },
        function () {
            $('div').css("background-image", 'url(image.png)');
        });
    }

但背景在较小的屏幕上仍然会发生变化。我错过了什么？

Answer 1

我建议将宽度检查放在事件处理程序中而不是外部。这样，您将在页面加载时测试当前视口，而不是视口。

伪示例：

$([selector]).on('mouseleave', function () {
    if ($(window).width() > 720) {
        ...
    }
}).on('mouseenter', function () {
    if ($(window).width() > 720) {
        ...
    }
});

Answer 2

我应该查看一下您的完整代码，以了解您的代码无效的原因。

但我不明白你为什么不使用普通的css悬停功能。

为什么不添加

@media screen and (min-width: 720px) {
  .div a {
    background: url(image.png);
  }

  .div a:hover {
    background: url(image-hover.png);
  }
}

到您的css文件？

Answer 3

试试这个＆＃34; screen.width＆＃34;

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

if (screen.width > 720) {
    $('div a').hover(
        function () {
            $('div').css("background-image", 'url(image-hover.png)');
        },
        function () {
            $('div').css("background-image", 'url(image.png)');
        });
    }

http://www.w3schools.com/js/js_window_screen.asp

如果宽度> 1，则悬停声明比

3 个答案: