Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2015, 15:57
Новичок на форуме
Отправить личное сообщение для sibirser Посмотреть профиль Найти все сообщения от sibirser
 
Регистрация: 07.07.2015
Сообщений: 8

Проблема с 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. Помогите, пожалуйста, начинающему.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2015, 16:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

sibirser,
сравнить цвет элемента с эталоном очень проблематично -- лучше избрать иной кретерий
для перебора массива лучше обычный for а for in.
у event нет стиля event.style -- вам нужен тут просто this.style или если хотите event.target.style
Ответить с цитированием
  #3 (permalink)  
Старый 07.07.2015, 16:18
Новичок на форуме
Отправить личное сообщение для sibirser Посмотреть профиль Найти все сообщения от sibirser
 
Регистрация: 07.07.2015
Сообщений: 8

рони,
Но какой критерий выбрать, ведь нужно именно к цвету привязать hover? А цвет привязывается через админку с динамическими классами.
Ответить с цитированием
  #4 (permalink)  
Старый 07.07.2015, 16:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

sibirser,
по классу и выбирайте -- а цвет браузеры каждый по своему может выдавать.
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2015, 16:22
Новичок на форуме
Отправить личное сообщение для sibirser Посмотреть профиль Найти все сообщения от sibirser
 
Регистрация: 07.07.2015
Сообщений: 8

рони,
Спасибо, this сработало. Но вроде как пробовал this... Странно
Ответить с цитированием
  #6 (permalink)  
Старый 07.07.2015, 16:56
Новичок на форуме
Отправить личное сообщение для sibirser Посмотреть профиль Найти все сообщения от sibirser
 
Регистрация: 07.07.2015
Сообщений: 8

Каким образом можно сделать то же самое, но при наведении на элемент менялся стиль псевдоэлемента?
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2015, 16:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

sibirser,
менять у элемента класс -- в css прописать нужное
Ответить с цитированием
  #8 (permalink)  
Старый 07.07.2015, 17:01
Новичок на форуме
Отправить личное сообщение для sibirser Посмотреть профиль Найти все сообщения от sibirser
 
Регистрация: 07.07.2015
Сообщений: 8

а без смены класса? Через getComputedStyle не сделать?
Ответить с цитированием
  #9 (permalink)  
Старый 07.07.2015, 17:14
Новичок на форуме
Отправить личное сообщение для sibirser Посмотреть профиль Найти все сообщения от sibirser
 
Регистрация: 07.07.2015
Сообщений: 8

рони,
Спасибо за ответы.
Ответить с цитированием
  #10 (permalink)  
Старый 07.07.2015, 17:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 08:30
Сбрасывание события mouseover Worka Events/DOM/Window 3 12.03.2012 01:03
проблема с mouseover Роман Валерьевич Internet Explorer 11 06.10.2011 08:16
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 16:07