Необходимо, чтобы свойство прозрачности div постепенно увеличивалось при каждом наведении курсора в JS - PullRequest
Новая
       14

Необходимо, чтобы свойство прозрачности div постепенно увеличивалось при каждом наведении курсора в JS

0 голосов
/ 03 мая 2018

Нуб здесь.

Я делаю эскизный проект и наткнулся на камень преткновения. Все работает, за исключением того, что у меня возникают проблемы с тем, чтобы квадраты стали темнее, когда я снова их посещаю с помощью мыши. Цель состоит в том, чтобы непрозрачность становилась темнее на 10% при каждом посещении площади. Я собрал код в коде пера:

https://codepen.io/dwdy250/pen/BxZYEE

Функция добавления слушателей событий и обновления квадратов выглядит следующим образом: 

function addListeners(){  //adds event listener and function that colors squares

    squares.forEach((squares) => {

        squares.addEventListener('mouseover', () =>{

            squares.setAttribute("style","background-color:black; display:inline-block;");
              squares.style.height = squareSize;
            squares.style.width = squareSize;
            squares.style.opacity += 0.1;

        });
    });
}

Я посмотрел на другие работы над тем же проектом, и они, похоже, использовали this.style.opacity = Number (this.style.opacity) + 0.1; однако, когда я использую это, просто получаю «this.style не определено» ... Я думаю, я действительно не понимаю, как и почему использовать «это» еще.

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Вы сбрасываете стиль для div в каждом событии мыши над

squares.setAttribute("style","background-color:black; display:inline-block;");

Попробуйте удалить эту строку кода и работать по-другому

0 голосов
/ 03 мая 2018

А как насчет использования backgroundColor? Вы можете уменьшить значения r, g и b, чтобы перейти от серого к черному 

var r = 64;
var g = 64;
var b = 64;

function addListeners(){  //adds event listener and function that colors squares

    squares.forEach((squares) => {

        squares.addEventListener('mouseover', () =>{

            squares.setAttribute("style","display:inline-block;");


      squares.style.height = squareSize;
      squares.style.width = squareSize;
      squares.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
      r -= 4;
      g -= 4;
      b -= 4;
    });
});

}

...