链路翻转时的 DIV 背景图像交换

DIV background image swap on link rollover

本文关键字：背景 图像 交换 DIV 翻转 链路      更新时间：2023-09-26

当用户滚动链接时，我正在尝试交换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>

尝试，例如

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

使用

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

而不是 

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

.style：

onmouseover="document.getElementById('divToSwap').style.backgroundImage='url(red.jpg)';"
相关文章：