Question

我有一张地图，周围放置了几台打印机，当鼠标悬停在打印机上时，会出现一份本地打印机列表。我想转换＆＃34;悬停＆＃34;点击＆＃34;点击＆＃34;通过JQuery。

这是我的代码（使用HTML，CSS和JQuery）：http://jsfiddle.net/K2e4E/

    $(document).ready(function () {
          $('#r1242').click( function() {
                $('#p1242').css("display","block");
          });
    });

阅读所有代码可能没有帮助;但是，我提供了所有这些。放入jsfiddle时，打印机的图片会受到诽谤，但我的重点是打印机的左下角图像。单击后，它将保留可用打印机列表，而不是在将其悬停后消失。

这适用于jsfiddle但是当我在Mozilla Firefox或Google Chrome上打开我的文件时，这并不适用。该特定打印机的可用打印机列表不会显示。这是为什么？

更新：

我相信我在HTML，CSS和JQuery之间的链接可能会出错，但所有这些更改都在JSFiddle中有效，但是当我在本地应用更改并尝试在Web浏览器中打开我的文件时，JQuery函数从不申请。这就是我在HTML文件中所拥有的。

    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" type='text/css' href="main.css"/>
    <script type='text/javascript' src='script.js'></script>

Answer 1

以1463室为例。

将此类添加到CSS中;

.show{
 display:block!important;   
}

注释掉悬停;

/* #r1463:hover > #p1463 {
    display:block;
}
*/

然后在你的HTML中;

<div id="r1463" onclick="$('#p1463').toggleClass('show');">

此处更新了小提琴; http://jsfiddle.net/K2e4E/2/

Answer 2

正如Darren所说，你必须评论你在悬停时应用的风格但是，您可以使用

而不是再添加一个类节目

$('#p1463').toggle();

不使用“id”而是为打印机图像div（例如＃r1411）以及div（例如＃p1242）添加公共类，因此您可以使用单击功能显示所有弹出窗口。

jQuery css（...，...）函数在click（）上运行JSFiddle而不是Firefox / Chrome

2 个答案: