Question

当用户翻过链接时，我正试图在div上换出背景图片。

我做错了什么？这不起作用。

<style>
#divToSwap {
    background-image: url(black.jpg);
    height: 150px;
    width: 150px;
}
</style>
</head>

<body>
<div id="divToSwap"></div>
<div>
<ul>
  <li><a href="#"
        onmouseover="document.getElementById('divToSwap').backgroundImage='url(red.jpg)';"
        onmouseout="document.getElementById('divToSwap').backgroundImage='url(black.jpg)';">
        Red</a></li>
  <li><a href="#"
        onmouseover="document.getElementById('divToSwap').backgroundImage='url(blue.jpg)';"
        onmouseout="document.getElementById('divToSwap').backgroundImage='url(black.jpg)';">
        Blue</a></li>
  <li><a href="#"
        onmouseover="document.getElementById('divToSwap').backgroundImage='url(green.jpg)';"
        onmouseout="document.getElementById('divToSwap').backgroundImage='url(black.jpg)';">
        Green</a></li>        
</ul>
</div>

Answer 1

尝试，例如

document.getElementById('divToSwap').style.backgroundImage='url(black.jpg)';

Answer 2

使用

document.getElementById('divToSwap').style.backgroundImage=...

而不是

document.getElementById('divToSwap').backgroundImage=....

Answer 3

.style缺失：

onmouseover="document.getElementById('divToSwap').style.backgroundImage='url(red.jpg)';"

DIV背景图像交换链接翻转

3 个答案: