Question

我正在创建一个书签，显示运行书签后点击的第一个元素的一些信息。我很想拥有它，所以你盘旋的元素有一个轮廓，但只有在你点击之前。选择元素后，悬停时轮廓将不再出现（除非在我的书签之前已经这样做）。

要获取点击的元素，这对我来说很好：

function getClickedElement(e) {
    document.removeEventListener("click", getClickedElement);
    e.preventDefault();
    clickedElement = e.target || e.srcElement;
    // Some code that displays information on clickedElement...
}
document.addEventListener("click", getClickedElement);

但我不知道如何做CSS。它可以像所有元素一样获得这个CSS：

:hover {
    outline: 1px solid black;
}

选择元素时

，但一旦选择了元素，它就会停止。希望一切都有意义。

Answer 1

原理解释的小例子！

如果用户点击该元素，请添加特定类。
CSS规则仅在元素与:not pseudo class内的选择器不匹配时添加outline-border！

document.addEventListener('click', function(evt) {
  var target = evt.target || evt.source;
  if(!target.classList.contains('element')) return;
  if(target.classList.contains('selected'))
    target.classList.remove('selected');
  else
    target.classList.add('selected');
}, true);

div.element {
  width:100px;
  height:100px;
  background-color:silver;
  display:inline-block;
}
.element.selected {
  background-color:black;
}
.element:not(.selected):hover {
  outline: 1px solid red;
}

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

如何临时添加轮廓：悬停元素

1 个答案: