Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проблема с mouseover (https://javascript.ru/forum/events/56864-problema-s-mouseover.html)

sibirser 07.07.2015 15:57

Проблема с mouseover
 
Есть примерно такой html:
<div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element  card-block1 vc_custom_1436266206902"></div>
	<div class="wpb_text_column wpb_content_element  card-block2 vc_custom_1436266225823"></div>
	<div class="wpb_text_column wpb_content_element  card-block3 vc_custom_1436266241114"></div>
</div>

Суть: нужно взять массив и сравнивать элементы с назначенным computed цветом блоков. Если цвет совпадает, то назначить hover через mouseover.
Вот что получилось:
<script type="text/javascript">
window.onload=function() {
var promoBlocks=document.querySelectorAll('#promo-cards .wpb_wrapper .wpb_content_element');
for(i in promoBlocks) {
var chaseSel=getComputedStyle(promoBlocks[i]).backgroundColor;
var col1='rgb(67, 155, 213)';
if (chaseSel===col1){
promoBlocks[i].addEventListener('mouseover', function(event) {
event.style.background='url(/wp-content/themes/salient/img/jam-hov.jpg) no-repeat 50% 50%';
});
};
};
};
</script>

Элементы находятся, но при наведении выдается ошибка Uncaught TypeError: Cannot set property 'background' of undefined. Помогите, пожалуйста, начинающему.

рони 07.07.2015 16:08

sibirser,
сравнить цвет элемента с эталоном очень проблематично -- лучше избрать иной кретерий
для перебора массива лучше обычный for а for in.
у event нет стиля event.style -- вам нужен тут просто this.style или если хотите event.target.style

sibirser 07.07.2015 16:18

рони,
Но какой критерий выбрать, ведь нужно именно к цвету привязать hover? А цвет привязывается через админку с динамическими классами.

рони 07.07.2015 16:21

sibirser,
по классу и выбирайте -- а цвет браузеры каждый по своему может выдавать.

sibirser 07.07.2015 16:22

рони,
Спасибо, this сработало. Но вроде как пробовал this... Странно :yes:

sibirser 07.07.2015 16:56

Каким образом можно сделать то же самое, но при наведении на элемент менялся стиль псевдоэлемента?

рони 07.07.2015 16:59

sibirser,
менять у элемента класс -- в css прописать нужное

sibirser 07.07.2015 17:01

а без смены класса? Через getComputedStyle не сделать?

sibirser 07.07.2015 17:14

рони,
Спасибо за ответы.

рони 07.07.2015 17:30

Цитата:

Сообщение от sibirser
а без смены класса?

смотря что вы хотите поменять -- можно скриптом через атрибуты управлять содержимым псевдо элемента -- но в css надо будет это прописать прежде.


Часовой пояс GMT +3, время: 11:20.