Question

我有一些javascript在悬停（通过按钮）时更改div背景，但我无法制作加载中心并覆盖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 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

您正尝试将背景的简写用于style.backgroundImage，这是无效的。而只使用style.background：

＆＃13;

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

＆＃13;

#hover-change {
  height: 200px;
}

＆＃13;

<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>

＆＃13;

Javascript - 设计Div的背景

2 个答案: