Изменение цвета по наведению на выбранную карточку с помощью JS

Question

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

'use strict';

(function () {
  const elCollection = document.getElementsByClassName('catalog__item-wrapper');
  
  for(var i = 0; i < elCollection.length; i++) {
    var elem = elCollection[i];
    const count = i;

    elem.addEventListener("click", function() {
        this.classList.toggle("main--main-bg");
        this.querySelector('.catalog__picture').classList.toggle('circle-bg'); 
    })

    elem.addEventListener("mouseover", function() {
      this.classList.add('catalog-wrapper--bg');
      this.querySelector('.catalog__picture').classList.add('catalog-picture--bg');
    })

    elem.addEventListener('mouseout', function() {
      this.classList.remove('catalog-wrapper--bg');
      this.querySelector('.catalog__picture').classList.remove('catalog-picture--bg');
    })

  }
  
})();

.catalog__item {
  position: relative;
  margin-right: 87px;

  list-style: none;
}

.catalog__item-wrapper {
  position: relative;
  width: 312px;
  min-height: 472px;

  margin-bottom: 17px;

  background-color: #f2f2f2;
  background: linear-gradient(135deg, transparent 24px, #fff 24px);
  border-radius: 12px;
}

.catalog__item-wrapper::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;

  background-color: lime;
  background: linear-gradient(135deg, transparent 25px, lime 25px);
  border-radius: 12px;
}

.catalog__picture {
  position: absolute;
  width: 100%;
  height: 270px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.catalog__picture::before {
  content: "";
  position: absolute;
  top: 179px;
  left: 220px;
  display: block;
  width: 80px;
  height: 80px;

  background-color: lime;
  border-radius: 50%;
}

.main--main-bg::before{
  background: linear-gradient(135deg, transparent 25px, orange 25px);
}

.circle-bg::before {
  background: orange;
}

.catalog-wrapper--bg::before {
  background: linear-gradient(135deg, transparent 25px, #98FB98 25px); 
}

.catalog-picture--bg::before {
  background: #98FB98;   
}

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <li class="catalog__item">
    <div class="catalog__item-wrapper" id="iwr" onclick="showColor()" />
     
        <div class="catalog__picture">
          
        </div>
      </a>
    </div>
    
  </li>
  <script src="main.js"></script>
</body>
</html>

Answer 1

У вас свойство применяется при наведении, не проверяя никаких условий, поэтому постоянно работает. Нужна проверка условий. Если вам нужно, чтобы свойства применялись только, если карточка выбрана (произошло нажатие), то это самое нажатие должно передавать состояние, например selected: true (булево значение) и оно должно проверяться при наведении в теле функции.

то есть, примерно так:

let state = false;

    elem.addEventListener("click", function() {
        state = true; 
    })

    elem.addEventListener('mouseout', function() {
      if(state == true) {
        this.classList.remove('catalog-wrapper--bg');
        this.querySelector('.catalog__picture').classList.remove('catalog-picture--bg');
      }
    })

БЛОГ НА HUSL

Изменение цвета по наведению на выбранную карточку с помощью JS

Ответы (1 шт):