好的，我使用JavaScript来控制图像交换，这样当有人点击图像时，它就会变为图像的“点亮”版本。在链接标记中执行此操作的代码是onclick="changeto('wdl')"，我在链接中添加了onmouseover="changeto('wdl')"，因此当您将鼠标悬停在链接上时，它也会亮起。
现在，问题出现的地方当然是我添加了onmouseout="changeto('wdd')"，这是图像的未点亮版本。当然，这里发生的事情是当我将鼠标悬停在它上面时，它会亮起，当我将光标移开时，它会变为非点亮版本。但是，当您单击它时，它会将图像更改为应该点亮的版本，但由于onmouseout命令，它将更改为未点亮的版本。
我想要的是能够将鼠标悬停在图像上并使其亮起。如果单击它并将鼠标移开它会保持点亮，但是如果不单击它并将鼠标移开，它将保持在“关闭”图像上。
任何帮助表示感谢，我很难过。我打算尝试使用某种if (!this)类型的东西，但老实说我真的不知道。
答案 0 :(得分：0)
你应该使用CSS和javascript的组合。查找css悬停以实现鼠标悬停功能并从js
执行单击部分CSS悬停在w3schools http://www.w3schools.com/cssref/sel_hover.asp
上答案 1 :(得分：0)
我看到两个解决方案：
1.为 onclick下面定义的wdd事件声明单独的CSS类（或使用!important。
2.使用在true中设置为onclick的标志变量，然后在onmouseout中进行测试：
onclick="changeto('wdl');flag=true;"
onmouseout="if (!flag) changeto('wdd')"
<击>
以下是CSS和Javascript的简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
#whl {
background: #e0e0ff;
line-height: 150px;
text-align: center;
width: 150px;
}
#wdl {
background: #e0ffe0;
line-height: 150px;
text-align: center;
width: 150px;
}
#whl:hover {
background: #ffcccc;
}
#wdl:hover {
background: #ffcccc;
}
#whl.selected {
background: #ffcccc;
}
#wdl.selected {
background: #ffcccc;
}
</style>
<script>
function doClick(el) {
document.getElementById("whl").className = document.getElementById("whl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
document.getElementById("wdl").className = document.getElementById("wdl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
el.className += "selected";
}
</script>
</head>
<body>
<div id="whl" onclick="doClick(this);">WHL</div>
<div id="wdl" onclick="doClick(this);">WDL</div>
</body>
</html>
它适用于颜色，在您的情况下，您将不得不用背景图像替换颜色（在CSS中）。