的Javascript - 造型一個DIV的背景

我有一些javascript改變上懸停div的背景（超過一個按鈕），但我無法使圖像加載中心並覆蓋DIV的Javascript - 造型一個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解決方案。

來源

2016-12-02 Chris Lad

請包括CSS和HTML結構爲好。 –

您正在嘗試與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>

來源

2016-12-02 15:41:56 DaniP

這似乎停止懸停工作 –

@ChrisLad我已經刪除了功能'link01'使代碼段，但你需要保持在你的實際代碼 – DaniP

是的，我看到似乎仍然打破懸停我已經更新我的問題與完整的代碼等 –

您無法設置background-position，background-repeat和style.backgroundImage。

而是與style.background

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

來源

2016-12-02 15:41:12 SvenL

@DaniP糾正它。謝謝（你的）信息。 – SvenL

的Javascript - 造型一個DIV的背景

回答

相關問題