Javascript

Question

我有一些 javascript 可以在悬停时（在按钮上）更改 divs 背景，但我无法制作加载中心并覆盖 div 的图像

有谁知道我做错了什么？这是代码：

function link01() {
    document.getElementById("hover-change").style.backgroundImage =
 "url(images/w1.jpg) center center / cover no-repeat";
}

按钮：

       <div class="open-project-link">
    <a onmouseover="link01(this)" style="font-size: 20px; line-height: 30px;"
 class="open-project" href="project3.html">Bowman Clay</a>
    </div>

Div:

<div class="responsive-section-image" id="hover-change" 
style="background-image: url(images/w0.jpg);">
<div class="overlay"></div>
</div>

应该是JavaScript解。

Answer 1

您不能将 background-position、background-repeat 设置为 style.backgroundImage。

改为尝试 style.background

function link01() {
    document.getElementById("hover-change").style.background =
 "url(images/w1.jpg) no-repeat center / cover";
}

Answer 2

您试图将 shorthand 用于背景和 style.backgroundImage，这是无效的。而是只使用 style.background :

function link01() {
  document.getElementById("hover-change").style.background =
    "url(http://placekitten.com/300) no-repeat center / cover"
}

#hover-change {
  height: 200px;
}

<div class="open-project-link">
  <a onmouseover="link01(this)" style="font-size: 20px; line-height: 30px;" class="open-project" href="project3.html">Bowman Clay</a>
</div>
Div:

<div class="responsive-section-image" id="hover-change" style="background-image: url(images/w0.jpg);">
  <div class="overlay"></div>
</div>

Javascript - 设计 Div 的背景

Javascript - Styling a Div's background

css

styles

background-image