Как временно добавить контур к элементам: hover

Question

Как временно добавить контур к элементам: hover

1

Я создаю букмарклет, который отображает некоторую информацию о первом элементе, который вы нажимаете после запуска букмарклета. Я бы хотел, чтобы у него был элемент, над которым вы нависаете, контур, но только до того, как вы нажмете. После того, как вы выбрали элемент, контур больше не будет отображаться при зависании (кроме случаев, когда он уже сделал это до моего букмарклета).

Чтобы получить элемент с щелчком, это отлично работает для меня:

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;
}

при выборе элемента, но останавливается после выбора элемента. Надеюсь, что все имело смысл.

Isaac Chen 28 окт. 2017, в 02:41

Источник

0

@JoshuaK JoshuaK мое дружеское предложение: отправьте ответ, когда вы думаете, что знаете его. Комментарии для уточнения. Наслаждайтесь вашей репутацией. :)
stealththeninja 28 окт. 2017, в 00:49

Теги:

javascript

css

1 ответ

Ещё вопросы

@JoshuaK JoshuaK мое дружеское предложение: отправьте ответ, когда вы думаете, что знаете его. Комментарии для уточнения. Наслаждайтесь вашей репутацией. :)

Joshua K · Accepted Answer · 2017-10-27T23-01-00.000Z

Небольшой пример с объяснением принципа!

Если пользователь нажимает на элемент, добавьте определенный класс.
CSS Rule добавляет контурную границу только в том случае, если элемент не соответствует селектору внутри : 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>

Вау, это прекрасно. Хотел бы я принять вас обоих, но это определенно заслуживает этого.