Question

我正在学习JavaScript，现在正在做作业。我需要找到如何在鼠标离开元素后从元素中删除背景图像。我编写了功能代码Dogimgleave（），它不会更新HTML。这是代码，请帮助我...

<img class=size src = "Images/Dog.jpg" alt="Dog!" onmouseover="Dogimgon()" onmouseleave="Dogimgleave()">

function Dogimgon(){
    document.getElementById("centertext").style.backgroundImage="url('Images/Dog.jpg')";
}
function Dogimgleave() {
    document.getElementById("centertext").style.backgroundColor="#65F0B6"; 
}

Answer 1

您将背景图像设置为图像，因此看不到背景颜色。您可以像这样清除图像...

function Dogimgleave() {
    var ct = document.getElementById("centertext");
    ct.style.backgroundImage = ""; // this removes the background image
    ct.style.backgroundColor="#65F0B6"; 
}

Answer 2

如果同时设置backogrund-image和background-color，则一个将覆盖另一个。您应该随时只设置其中之一：

var elem = document.getElementById("centertext");
function Dogimgon(){
    elem.style.backgroundImage = "url('Images/Dog.jpg')";
    elem.style.backgroundColor = "";
}
function Dogimgleave() {
    elem.style.backgroundImage = "";
    elem.style.backgroundColor = "#65F0B6"; 
}

这当然可以简化为仅设置background属性：

var elem = document.getElementById("centertext");
function Dogimgon(){
    elem.style.background = "url('Images/Dog.jpg')";
}
function Dogimgleave() {
    elem.style.background = "#65F0B6"; 
}

或者，您也可以始终设置颜色（但是可以通过图像的透明部分看到颜色）并仅更改图像：

var elem = document.getElementById("centertext");
elem.style.backgroundColor = "#65F0B6"; 
function Dogimgon(){
    elem.style.backgroundImage = "url('Images/Dog.jpg')";
}
function Dogimgleave() {
    elem.style.backgroundImage = "";
}

顺便说一句，除非您的任务是完全在JavaScript中完成，否则您可以使用纯CSS轻松实现相同的结果：

#centertext {
    background: #65f0B6;
}
#centertext:hover {
    background: url('/Images/Dog.jpg');
}

Javascript /我一直坚持改回到原始背景

2 个答案: