Question

我尝试将它们分开。

<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This will change b element</div>
<div id="b">This is element b</div>

<div id="f" onmouseover="chbg('blue')" onmouseout="chbg('white')">This will change g element</div>
<div id="g">This is element g</div>

<div id="j" onmouseover="chbg('yellow')" onmouseout="chbg('white')">This will change k element</div>
<div id="k">This is element k</div>

这是JS

function chbg(color) {
    document.getElementById('b').style.backgroundColor = color;
    document.getElementById('g').style.backgroundColor = color;    
    document.getElementById('k').style.backgroundColor = color;    
}

此处无效http://jsfiddle.net/qUzn5/。

Answer 1

您可能希望在函数中添加第二个参数，如下所示：

的JavaScript：
function chbg(color, id) { document.getElementById(id).style.backgroundColor = color; }

HTML：
（重复div＆＃39; s）

<div id="a" onmouseover="chbg('red', 'a')" onmouseout="chbg('white')">This will change b element</div>

Answer 2

目前它们都被着色，因为该函数调用了每个ID

我想你应该在你的javascript函数中添加一个变量。该变量包含要更改的元素的id。

我对javascript一无所知，但我想它应该是这样的：

function chbg(id,color) {
document.getElementById(id).style.backgroundColor = color;   
}

Answer 3

你用jQuery标记了这个，所以我假设你正在使用它。如果是这样，请将代码缩减一点......

$（＆＃39;＃b＆＃39;）。css（＆＃39; background-color＆＃39;，color）;

如果你正在使用jquery，你不应该使用getElementById和.style。

http://api.jquery.com/css/#css2

由于你的功能中包含了所有内容，因此每个背景都会发生变化。

如果必须使用javascript而不是CSS，请尝试将不同的参数传递给您的函数。也许应该改变背景的ID。然后根据传递的ID在函数中设置条件。

if（divId ==＆＃39; b）{ 代码改变b div }

在悬停时更改CSS

3 个答案: