0

По событию mouseout удаляется блок с этим крестиком и при событии mouseover создается опять. Из за этого картинка сильно дергается. Как можно улучшить код дабы исправить эту проблему?

Что я пытаюсь сделать: нужно чтобы при наведении на блок с классом .incut .left появлялся белый крестик (там, где он появляется сейчас) и по нажатию на этот крестик удалялся весь этот блок с классом .incut .left. Если просто увести курсор, то белый крестик исчезает.

function AddHoverButton() {
  const incut = document.querySelectorAll(".incut.left");
  [].forEach.call(incut, function(item) {
item.addEventListener("mouseover", function(event) {
  uncuteInsertText(event.type, item);
});
item.addEventListener("mouseout", function(event) {
  uncuteInsertText(event.type, item);
});
  });
  deleteInsertText(incut);
}

function uncuteInsertText(type, element) {
  const iElement = document.createElement("i");
  iElement.className = "glyphicon glyphicon-remove";
  iElement.id = "deletingItem";
  console.log(element);
  if (type === "mouseover") {
element.prepend(iElement);
  } else if (type === "mouseout") {
const itemToDelete = document.getElementById("deletingItem");
itemToDelete.remove();
return false;
  }
}

//Функция, которая по идее должна удалять узел по нажатию на крестик
function deleteInsertText(elem) {
  const itemToDelete = document.getElementById("deletingItem");
  itemToDelete.addEventListener("click", function(event) {
elem.parentNode.removeChild(elem);
  });
}

document.addEventListener("DOMContentLoaded", AddHoverButton());
.incut.left {
  border-right: 2px solid #c0c0c0;
  border-left: none;
  float: right;
  margin: 8px 20px 8px 0px;
}

.incut {
  width: 330px;
  position: relative;
}

.incut.left a {
  float: left;
}

.incut a {
  float: right;
  font-size: 14px;
  text-decoration: none;
  width: 314px;
}

.incut img {
  width: 314px;
  margin-bottom: 10px;
}

P {
  margin: 5px 0px 7px 0px;
}

#deletingItem {
  cursor: pointer;
  width: 100%;
  height: 100%;
}

#deletingItem::before {
  position: absolute;
  left: 20%;
  top: 0.5em;
  height: 160px;
  width: 160px;
  text-align: center;
  color: rgba(255, 246, 246, 0.82);
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="incut left">
  <a title="«Терранову» и «Шоколадницу» во Владивостоке закрыли по решению суда" href="https://primamedia.ru/news/693791/" data-mce-href="https://primamedia.ru/news/693791/"><img src="http://primamedia.ru/f/266x136/1507/1506378.jpg" alt="" data-mce-src="http://primamedia.ru/f/266x136/1507/1506378.jpg">«Терранову» и «Шоколадницу» во Владивостоке закрыли по решению суда</a>
</div>

Здесь песочница с данным кодом

2 ответа 2

1

Замените обработки событий mouseover и mouseout на соответствующие для mouseenter и mouseleave.

Проблема в вашем случае в том, что при наведении курсора на дочерний элемент срабатывает mouseout для родителя.

0

Сделай opacity вместо удаления и не парься:)

4
  • так тоже самое ведь? 16 мая 2018 в 6:02
  • я не могу лишний html добавить не средствами js, все должно создаваться и удалятся только в js, так как потом оно отправляется на сервер и отображается на другом поддомене уже в "чистом виде" без функционала при наведении 16 мая 2018 в 6:05
  • @Herrgott не знаю как сделать правильно, очевидно) не могу понять как оно должно работать с transition с удалением тега <i> 16 мая 2018 в 6:31
  • @Herrgott спасибо большое за отзывчивость) Парень выше правильный вариант предложил) 16 мая 2018 в 6:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.