Tobynate Ответов: 1

Как сделать так, чтобы каждый класс в массиве классов менял цвет при наведении курсора мыши

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

Что я уже пробовал:

const selectElemAll = function(className) {
	return document.querySelectorAll(className);
};

let blogContent = selectElemAll(".blog-content-text");

function ReadMore(blogContentClass) {
	let contentRemove = [];
	let elipsis = "...";
	for(var i = 0; i < blogContentClass.length; i++){
		if (blogContentClass[i].innerText.length > 180) {
		let content= blogContentClass[i].innerText;
		let contentRemoveAdd = content.slice(180, content.length);
		 contentRemove.push(contentRemoveAdd);
		 blogContentClass[i].innerText = blogContentClass[i].innerText.replace(contentRemove[i], elipsis);
	    let readMoreBtn = document.createElement("a","HTMLLinkElement");
		 readMoreBtn.className = "read-more";
		 readMoreBtn.innerHTML = "Read More";
		 readMoreBtn.href = "#";
		 readMoreBtn.classList.add("read-more-btn");
		 blogContentClass[i].appendChild(readMoreBtn);
		}
	}
}
	ReadMore(blogContent)

	for(var i = 0; i < blogContent.length; i++){
		blogContent[i].addEventListener('mouseover', () => {
			blogContent[i].childNodes[1].style.color = "black";
		});

1 Ответов

Рейтинг:
0

Sandeep Mewara

Подумайте, что поиск в этом случае поможет: Псевдоклассы CSS[^]
Пример:

a {
  color: green;
}

a:hover {
  color: yellow;
}

button:active {
  background-color: green;
}

button:focus {
  background-color: blue;
}

button:hover {
  background-color: red;
}


Больше ссылок:
Когда применяются псевдоклассы :hover, :focus и :active?[^]
Основы CSS: использование :hover и :active псевдоклассов ← Alligator.io[^]

Tobynate

Я знаю, что есть способы использовать CSS для этого, но я просто предпочитаю использовать javascript, потому что элемент был создан с помощью javascript, поэтому я бы предпочел стиль с помощью javascript

Sandeep Mewara

И вы не хотите добавлять класс во время выполнения с помощью javascript?

Tobynate

Конечно я бы добавил этот класс во время выполнения с помощью js