javascript - 如何临时给:hover elements加上大纲

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

小例子说明原理!

1. 如果用户点击元素，添加一个特定的类。
2. CSS 规则仅在元素与 :not pseudo class 内的选择器不匹配时才添加轮廓边框!

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>