Question

我的网站上有一个响应式菜单。在完整尺寸中，将鼠标悬停在按钮上会更改整个菜单的背景（而不是按钮！）。因为我认为通过CSS将一个div元素悬停在其中一个子元素上是不可能的（如果我错了，请纠正我），我是通过JavaScript完成的。对于每个菜单按钮，我有如下功能。每个按钮都会显示不同的背景图像。

function arme() {
    if (document.documentElement.clientWidth > 590) {
        var bild = "url('" + bildliste[3] + "')";
        document.getElementById('auswahlbox').style.backgroundImage=bild;
    }
}

如您所见，对于较低分辨率（＆gt; 590px），菜单的背景不会改变，因为菜单看起来不同。然后背景总是相同的图像。 CSS看起来像这样：

@media only screen and (max-width: 590px) {
    #auswahlbox { background:url(images/koerperbilder/koerperbg.jpg); 
}

如果我以完整尺寸加载我的网站然后缩小视口，则菜单的背景将更改为通过CSS设置的图像。这是它应该如何运作的。

然而，现在我的问题：如果我以完整大小加载我的网站，将鼠标悬停在一个随机按钮上（从而激活上面的JavaScript函数）和然后使视口变小，背景不会＆＃ 39;改变。通过将鼠标悬停在按钮上，它保持原样。显然，事先通过JavaScript设置的backgroundImage无法通过上面的简单CSS媒体查询进行更改。

我的问题是：如何使用CSS媒体查询更改通过JavaScript设置的backgroundImage？如果那是不可能的，我怎样才能解决我的困境？

目前，这个问题正在破坏用户体验。由于应用了媒体查询的所有其他规则（其中包括背景位置和背景重复），每当有人在将鼠标悬停在按钮上后调整视口大小时，一切都会崩溃。我想知道是否有人可以提供帮助。

提前谢谢你 - 抱歉我的英语不好。

Answer 1

您已通过JavaScript设置了backgroundImage属性

document.getElementById('auswahlbox').style.**backgroundImage**=bild;

你也应该在CSS中设置相同的属性。所以使用以下代码

@media only screen and (max-width: 590px) {
    #auswahlbox { **background-image**:url(images/koerperbilder/koerperbg.jpg); 
}

使用CSS媒体查询通过JavaScript更改backgroundImage集

1 个答案: