0

好的，我正在使用 JavaScript 来控制图像交换，以便当有人单击图像时，它会变为图像的“点亮”版本。在链接标签中执行此操作的代码是onclick="changeto('wdl')"我添加onmouseover="changeto('wdl')"到链接中的，因此当您将鼠标悬停在它上面时，它也会亮起。

现在，问题出现的地方自然是我添加onmouseout="changeto('wdd')"了图像的未点亮版本。当然，这里发生的事情是当我将鼠标悬停在它上面时，它会亮起，当我将光标移开时，它会变为不亮的版本。但是，当您单击它时，它会将图像更改为应有的点亮版本，但是由于该onmouseout命令，它会更改为未点亮的版本。

我想要的是能够将鼠标悬停在图像上并使其亮起。如果您单击它并将鼠标移开，它会保持点亮状态，但如果您不单击它并将鼠标移开，它会停留在“关闭”图像上。

任何帮助表示赞赏，我在这里很难过。我打算尝试使用某种if (!this)类型的东西，但老实说我不知道​​。

4

2 回答 2

0

您应该使用 CSS 和 javascript 的组合。查css hover实现鼠标悬停功能，从js做点击部分

CSS 悬停在 w3schools http://www.w3schools.com/cssref/sel_hover.asp

于 2012-04-05T02:01:48.710 回答
0

onclick我看到了两种解决方案：1.为下面定义的事件声明单独的 CSS 类wdd（或使用!important. 2. 使用设置为trueinonclick然后测试的标志变量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 中）。

于 2012-04-05T02:02:01.077 回答