vanilla JS при наведении на div изменить цвет фона - PullRequest
Новая
       6

vanilla JS при наведении на div изменить цвет фона

1 голос
/ 17 января 2020

Я работаю над созданием интерактивной сетки, которая похожа на Etch-a-Sketch. У меня настроена сетка, и теперь я пытаюсь настроить эффект «зависания», чтобы дивы сетки меняли цвет, когда мышь над ними переходит, оставляя (пикселированный) след через сетку, как перо. Но я хочу, чтобы цвет менялся в зависимости от нажатой кнопки; ie черная кнопка оставляет черный след при наведении, а радуга оставляет след радуги и сброс очищает сетку. 

<head> 
  <title> Claudias Etch-A-Sketch</title>
  <link rel= "stylesheet"  href="style.css">

</head>
<body>
  <section class="black"> 
    <h1><center> Claudia Etch-A-Sketch!</center></h1>
  </section>

  <section>
    <div class="buttons">
      <button id="rainbow">Rainbow</button>
      <button id="black">Black</button>
      <button id="reset">Reset</button>
    </div>
  </section>
  <section>
    <div id="container"> </div>
  </section>
</body>


<script src="javascript.js"></script>

const container = document.getElementById("container");
const btnReset = document.getElementById("reset");
const btnBlack = document.getElementById("black");
const btnRainbow = document.getElementById("rainbow");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");

    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  height: 30px;
  width: 30px;
  border: 1px solid #ddd;
  text-align: center;
}  

.black {
  background-color: black;
}

h1 {
  color: white;
}

Ответы [ 2 ]

0 голосов
/ 18 января 2020 
.grid-item {
    height: 30px;
    width: 30px;
    border: 1px solid #ddd;
    text-align: center;
    transition: ease 3s all;
}

.grid-item:hover {
    background-color: blue;
    transition: ease 0.1s all;
}

Мы можем добавить: анимация при наведении css трюк

0 голосов
/ 17 января 2020

Поскольку вам нужен след, вам нужно постоянно менять цвет, а не только при наведении, поэтому вам необходимо использовать javascript.

Добавить прослушиватель событий для каждого элемента сетки при создании Ваша сетка с: 

cell.addEventListener('mouseover', 
  e => e.target.classList.add('my-colour-class')
)

Затем просто убедитесь, что у вашего класса my-color есть соответствующие стили 

.my-color-class {
  background-colour: blue;
}

Обратите внимание, чтобы изменить примененный класс (изменение цвета следа в зависимости от какое перо было выбрано) сохранить текущий цвет в переменной состояния и иметь карту, например 

let currentColor = 'black'

const colors = { black: 'black' }

e => e.target.classList.add(colors[currentColor])
...