Как добавить эффект наведения мыши при наведении курсора на все элементы на странице? - PullRequest
Новая
       1

Как добавить эффект наведения мыши при наведении курсора на все элементы на странице?

2 голосов
/ 20 марта 2020

У меня есть сетка маленьких квадратов 16x16. Я добавил постоянный эффект «зависания», чтобы самая первая коробка становилась красной, когда я наводил на нее мышь. Однако я хочу добавить одинаковый эффект ко всем полям на странице. Я не могу понять, как это сделать - я пытался добавить прослушиватель событий на всю страницу и использовал target.nodeName и target.NodeValue, но безрезультатно. Я включил рабочую версию, где окно исправлений становится красным при наведении курсора мыши. 

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

const smallBox = document.querySelector('.smallBox');

smallBox.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
});
.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

Ответы [ 6 ]

3 голосов
/ 21 марта 2020

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

const smallBox = document.querySelector('.smallBox');

smallBox.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
});

В приведенной выше части кода: querySelector возвращает только первый соответствующий элемент. Возможно, вы ищете querySelectorAll , который возвращает NodeList соответствующих элементов.

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

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

const smallBoxes = document.querySelectorAll('.smallBox');

[...smallBoxes].forEach(smallBox => {
  smallBox.addEventListener('mouseover', () => {
      smallBox.classList.add('permahover');
  });
})
.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

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

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

bigContainer.addEventListener('mouseover', e => {
  var target = e.target

  if (target !== bigContainer) {
    target.classList.add('permahover')
  }
})
.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>
1 голос
/ 21 марта 2020

Вы должны установить eventlistener для вашей DOM и спросить, является ли элемент триггера одним из ваших элементов, которые указывают c класс. Таким образом, вы можете обрабатывать каждый элемент с этим классом. 

var n = 16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for (var i = 1; i < n; i++) {
  bigContainer.innerHTML += '<div class="row">';

  for (j = 0; j < n; j++) {
    bigContainer.innerHTML += '<div class="smallBox">';
  }
}

document.addEventListener('mouseover', function(e) {
  if (e.target && e.target.className == 'smallBox') {
        var target = e.target;
        target.classList.add('permahover');
  }
});

Работа js скрипка: https://jsfiddle.net/nwukf205/

надеюсь, я смогу помочь вам :) вопросы просто задайте

1 голос
/ 21 марта 2020

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

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

bigContainer.addEventListener('mouseover', () => {
    // Code for checking if we hovered a small div & if yes applying the style
});

... и затем делаете сравнение с event.target (который будет маленьким div завис) 

if (event.target.matches('.smallBox')) {
    event.target.classList.add('permahover');
}


var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

const smallBox = document.querySelector('.smallBox');

bigContainer.addEventListener('mouseover', () => {
    if (event.target.matches('.smallBox')) {
        event.target.classList.add('permahover');
    }
});
.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}
<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>
1 голос
/ 21 марта 2020 
let smallBoxes = document.querySelectorAll('.smallBox');
[...smallBoxes].forEach(el => {
    el.addEventListener('mouseover', e => e.target.classList.add('permahover'));
});
1 голос
/ 21 марта 2020

Вы можете использовать forEach метод для l oop через все поля и добавлять eventListener для каждого. Если все они имеют класс .smallBox, вы можете сделать это следующим образом: 

const smallBoxes = document.querySelectorAll('.smallBox');

smallBoxes.forEach(box => box.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
}))

Надеюсь, это помогло вам!

0 голосов
/ 21 марта 2020

Вы пробовали: hover selector? Не уверен, если вы хотите указать какие-либо динамические c действия здесь, но это легко сделать основы c вещи.

https://www.w3schools.com/cssref/sel_hover.asp

a:hover {
   background-color: yellow;
 }

I Я не пробовал ваш пример, но на что-то похожее ответили здесь:

Наведите указатель мыши на элемент и выделите все элементы одного класса

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...