Как задать стили элементу дочерним элементам через класс?

106

12 февраля 2022, 08:00

    function textHighlight(str1, str2) {
        str1 = str1.text;
        str2 = str2.text;
      str1 = str1.split(" ");
      let str = str1.map(subStr => {
        if (str2.includes(subStr)) {
          return `<span onmouseout=\"this.style=''; \" onMouseOver=\"this.style = 'color:blue'\">${subStr}</span>`;
        } else {
          return subStr;
        }
      });
      return str.join(" ");
    }
var foundQuestion = findQuestion('"' + eachQuestion.textContent + '"'); // Возвращает вопрос в виде строки string
eachQuestion.innerHTML = textHighlight(eachQuestion,foundQuestion);  // Делает подсветку слов в eachQuestion

Однако в этом коде делается подсветка при наведении на каждое слово, а мне нужно так:

При наведении на блок, подсвечивались все встречаемые слова (а не каждое по отдельности)

Вабще я придумал вот что: Присвоить класс всем нужным span элементам:

return `<span class="podsvetka">${subStr}</span>`;

Однако я столкнулся с такой проблемой, что мне нужно стили присваивать прямо в Javascript-коде То есть мне нужно выбрать из элемента eachQuestion все элементы с классом .podsvetka и установить им style="color:blue"

Помогите

UPD

Мне нужно повесить события onMouseOver и onMouseOut на eachQuestion
При наведении на блок eachQuestion менялись бы цвета у блоков с классом podsvetka (style='color:blue')

Answer 1

не туда копаете.

.text:hover > span.podsvetka { color: red; }

<div class="text"> 
  <span class="podsvetka">Lorem</span> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum <span class="podsvetka">felis</span> eu pede mollis pretium. 
</div>

Answer 2

В CSS существует псевдокласс :hover , который определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата Статья о :hover

*, *:before, *:after { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
} 
 
body { 
	margin: 0; 
	font-size: 16px; 
	font-family: 'Open Sans', sans-serif; 
} 
 
img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
} 
 
.wrapper { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
} 
 
.item { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	text-align: center; 
	max-width: 400px; 
	margin: 20px 1.5% 20px 0; 
	padding: 30px 20px; 
	position: relative; 
	font-size: 20px; 
	background-color: rgb(221, 221, 221); 
	transition: border-radius .2s linear; 
	cursor: pointer; 
	overflow: hidden; 
  min-width: 32%; 
} 
 
.item:last-child { 
	margin-right: 0; 
} 
 
.item__title { 
	font-weight: bold; 
	margin-bottom: 15px; 
} 
 
.description { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	width: 100%; 
} 
 
.item__description { 
	margin-bottom: 15px; 
	min-height: 81px; 
	opacity: 0; 
	transition: opacity .3s linear, 
				height .3s linear, 
				transform .3s linear, 
				width .3s linear; 
	overflow: hidden; 
	width: 1px; 
	height: 0; 
	transform: scale(0.1, 0.1); 
  font-size: 2vw; 
 
} 
 
.item__description__magic { 
	width: 50px; 
	height: 50px; 
	position: absolute; 
	top: 25%; 
	left: 10%; 
	border-radius: 50%; 
	background-color: black; 
	transition: transform .2s linear; 
} 
 
.item img { 
	transition: .5s filter ease-in-out; 
} 
 
.item:hover { 
	border-radius: 20px; 
} 
 
.item:hover .item__description__magic { 
	transform: scale(0); 
} 
 
.item:hover .item__description { 
	width: 348px; 
	transform: scale(1, 1); 
	min-height: 81px; 
	opacity: 1; 
} 
 
.item:hover img { 
	filter: grayscale(100%); 
} 
 
@media (min-width: 1000px) { 
  .item__description__magic { 
    top: 18%; 
  } 
}

<div class="wrapper"> 
 
<div class="item"> 
	<div class="item__title">Заголовок</div> 
	<div class="description"> 
		<div class="item__description__magic"></div> 
		<div class="item__description"> 
			Большоое Очеееень Описание 
			Большоое Очеееень Описание 
			Большоое Очеееень Описание 
		</div> 
	</div> 
	<div class="item__img"> 
		<img src="https://picsum.photos/500/250"> 
	</div> 
</div> 
 
<div class="item"> 
	<div class="item__title">Заголовок</div> 
	<div class="description"> 
		<div class="item__description__magic"></div> 
		<div class="item__description"> 
			Большоое Очеееень Описание 
			Большоое Очеееень Описание 
			Большоое Очеееень Описание 
		</div> 
	</div> 
	<div class="item__img"> 
		<img src="https://picsum.photos/500/250"> 
	</div> 
</div> 
 
<div class="item"> 
	<div class="item__title">Заголовок</div> 
	<div class="description"> 
		<div class="item__description__magic"></div> 
		<div class="item__description"> 
			Большоое Очеееень Описание 
			Большоое Очеееень Описание 
			Большоое Очеееень Описание 
		</div> 
	</div> 
	<div class="item__img"> 
		<img src="https://picsum.photos/500/250"> 
	</div> 
</div> 
 
</div>

Если хотите мучаться на JavaScript:

function start() { 
 
	let wrapper = document.querySelectorAll('.wrapper'); 
	let childik = document.querySelectorAll('.childik'); 
 
	for (let i = 0; i < wrapper.length; i++) { 
		wrapper[i].style.cssText = ` 
			max-width: 1000px; 
			margin: 0 auto; 
			display: -webkit-flex; 
			display: -moz-flex; 
			display: -ms-flex; 
			display: -o-flex; 
			display: flex; 
		`; 
	} 
 
	for (let i = 0; i < childik.length; i++) { 
		childik[i].style.cssText = ` 
			flex: 1; 
			min-height: 100px; 
			margin-right: 1%; 
			background-color: black; 
			transition: .4s background-color ease-in-out, 
						.4s flex ease-in-out; 
		`; 
	} 
 
	childik[childik.length-1].style.marginRight = '0px'; 
 
	for (let i = 0; i < childik.length; i++) { 
		childik[i].addEventListener('mouseover', () => { 
			childik[i].style.backgroundColor = 'red'; 
			childik[i].style.flex = '5'; 
		}); 
 
		childik[i].addEventListener('mouseout', () => { 
			childik[i].style.backgroundColor = 'black' 
			childik[i].style.flex = '1'; 
		}); 
	} 
 
} 
 
document.addEventListener('DOMContentLoaded', start);

<div class="wrapper"> 
	<div class="childik"> 
		 
	</div> 
	<div class="childik"> 
		 
	</div> 
	<div class="childik"> 
		 
	</div> 
	<div class="childik"> 
		 
	</div> 
	<div class="childik"> 
		 
	</div> 
	<div class="childik"> 
		 
	</div> 
</div>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Убрать всё лишнее из строки

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

101

javascript

Vuej.js; Крашится Chrome при дебаге

У меня возникли проблемы с select в vue, даже в простейшем примереЯ создаю проект с помощью команды vue init webpack-simple

147

javascript

Как отловить событие включения экрана телефона, чтобы снова поднять вэбсокеты?

Есть такая проблема, что на странице spa в браузере при выключении экрана (допустим юзер смотрит на страничку в браузере, но нажал кнопку выключения,...

140

javascript

Почему сервер не разбирает urlencoded form?

Отправляю запрос в формате x-www-form-urlencoded (заголовок явно указан), на сервере читаю $_POST и там абсолютно пусто