Question

我目前使用以下HTML块来突出显示.png文件的特定区域：

<div id="container">
    <img src="http://www.placekitten.com/200/200" />
    <div id="highlight"></div>
</div>

其对应的CSS代码如下所示：

#container {
    positioon:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

可以看到两者在以下page上一起工作。

代码工作正常，但我想要做的是通过控制此功能的JavaScript函数找出一种打开/关闭突出显示的方法。我是一个JavaScript新手，不知道如何处理这个问题。我想要的是能够将变量传递给JavaScript函数，并根据此布尔变量激活或停用阴影。

有人能告诉我怎么做吗？

感谢所有回复的人。

Answer 1

您可以创建CSS类规则：

.hide {
    display: none;
    visibility: hidden;
}

使用javascript将该类添加或删除到要切换的元素。这样，当元素有class="none"时，它就不会显示，只需删除class="none"它就会再次显示。

这里有一个关于使用纯javascript添加和删除类的好问题：Change an element's class with JavaScript

Answer 2

如果我理解你所说的话，你就会想要当有人用指针通过div时，显示或隐藏它。
如果我没错，你只需要使用#highlight:hover {...}，不需要javascript。
此外，您必须添加display: block属性，默认情况下必须为display: none。

Answer 3

function toggleHighlight(on)
{
  var el = document.getElementById('highlight');

  el.style['display'] = on ? 'block' : 'none';
}

称为：

toggleHighlight(true);  // turn on
toggleHighlight(false); // turn off

Answer 4

在你的小提琴中，我可以看到你使用jquery，所以这可以使用以下代码实现：

// show the element
$('#highlight').hide();
// hide the element
$('#highlight').show();

我有updated你的例子来测试隐藏功能。

使用JavaScript打开/关闭元素的CSS

4 个答案: