Javascript.RU

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

:hover и :active у дочерних и родительских элементов
Есть активный элемент (большая кнопка) — меняет стиль на :hover и на :active.
У этого элемента есть дочерний элемент (маленькая кнопочка сверху), который также реагирирует на :hover и на :active. Нужно сделать так, чтобы при нажатии на дочерний элемент стиль менялся только у дочерней кнопки (а у родительской оставался бы просто стиль :hover).

В IE и Opera это так и происходит.
А в браузерах на основе WebKit и Mozilla — нет, срабатывают оба элемента.

Вот пример: http://apple-cat.ru/-d/qa/active_click.html

Матерые специалисты, подскажите как решить проблему? ))
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2012, 18:49
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Dimus,
Оберните Ваш Раrent еще дивом, перетащите кнопку во внешний див, задайте ей
z-index:2; и спозиционируйте на старое место - тады hover(ы) будут раздельны

Последний раз редактировалось Deff, 01.06.2012 в 11:40.
Ответить с цитированием
  #3 (permalink)  
Старый 02.06.2012, 10:45
Новичок на форуме
Отправить личное сообщение для Dimus Посмотреть профиль Найти все сообщения от Dimus
 
Регистрация: 31.05.2012
Сообщений: 4

Сообщение от Deff Посмотреть сообщение
Dimus,
Оберните Ваш Раrent еще дивом, перетащите кнопку во внешний див, задайте ей
z-index:2; и спозиционируйте на старое место - тады hover(ы) будут раздельны
Спасибо!!
Это почти то, что нужно!
Один момент — можно ли как-то сделать, чтобы родительский стиль :hover при наведении на дочернюю (хотя теперь уже не дочернюю) кнопку оствался?

Так сделано у хрома на странице с самыми посещаемыми сайтами.
Изображения:
Тип файла: jpg chrome.jpg (22.3 Кб, 4 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 02.06.2012, 12:06
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Dimus
Один момент — можно ли как-то сделать, чтобы родительский стиль :hover при наведении на дочернюю (хотя теперь уже не дочернюю) кнопку оствался?
Не понял, поясните: - должен возникать эффект hover на большом квадрате, при наведении на кнопку ?
Ответить с цитированием
  #5 (permalink)  
Старый 02.06.2012, 16:18
Новичок на форуме
Отправить личное сообщение для Dimus Посмотреть профиль Найти все сообщения от Dimus
 
Регистрация: 31.05.2012
Сообщений: 4

Да, ховер должен оставаться при наведении на кнопку на большом квадрате, как здесь:
http://apple-cat.ru/-d/qa/active_click.png

Сейчас этого не происходит:
http://apple-cat.ru/-d/qa/active_click1.html
Ответить с цитированием
  #6 (permalink)  
Старый 02.06.2012, 16:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Dimus
Да, ховер должен оставаться при наведении на кнопку на большом квадрате, как здесь:
Поправьте эти два пункта
.parent.hover,
		.parent:hover {
			box-shadow: 2px 4px 1px hsla(0, 0%, 0%, 0.5);
			top: -2px;
			background-color: hsl(0, 90%, 95%);
		}
<div class="child" id="child1" onmouseover="this.parentNode.childNodes[1].className='parent hover'" onmouseout="this.parentNode.childNodes[1].className='parent'">Х</div>
Ответить с цитированием
  #7 (permalink)  
Старый 03.06.2012, 19:54
Новичок на форуме
Отправить личное сообщение для Dimus Посмотреть профиль Найти все сообщения от Dimus
 
Регистрация: 31.05.2012
Сообщений: 4

Ооотлично!
Все работает, хорошее решение. Прибольшущее вам спасибо!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блокировка событий всех дочерних элементов moreo Элементы интерфейса 4 26.05.2012 23:58
hover - несколько элементов как один megapup Events/DOM/Window 3 28.10.2010 20:06
Выбор дочерних элементов, имеющих высоту DNCH jQuery 4 06.10.2010 13:03
Получить список родительских элементов exec Общие вопросы Javascript 3 20.06.2010 11:00
Как изменить background всех дочерних элементов внутри <div>? libinstyle Общие вопросы Javascript 2 24.03.2010 13:25