ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Про изменение дочерних стилей при изменении родительского класса
25 сообщений из 28, страница 1 из 2
  1  все
Про изменение дочерних стилей при изменении родительского класса
    #36215020
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Имею разметку и css:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<ul>
  <li onmouseover="this.className='bg_a';"
      onmouseout="this.className='bg_na';">

      <span id="something">Какой-то текст...</span>

      <div ID="IconsDiv" runat="server" class="icons" style="display: none;">
        <img ... />
      </div>

  </li>
</ul>
Код: plaintext
1.
ul li.bg_a .icons { display: inline; }
ul li.bg_na .icons { display: none; }

Цель: Сделать так, чтобы span с id="something" отображался постоянно, а блок IconsDiv с картинкой внутри — только при наведении курсора.

Вопрос: Что не так в моём коде? (При наведении на li, его класс меняется, но блок IconsDiv остаётся невидимым). Я так понимаю, что почему-то значения дочерних стилей не пересчитываются при изменении класса. Так? Как этого избежать?

Корни проблемы: изначально код работал, но оочень медленно в IE (с применением js и DOM):
Код: plaintext
1.
2.
<ul>
  <li onmouseover="this.className='bg_a'; document.getElementById('IconsDiv').style.display='';"
      onmouseout="this.className='bg_na'; document.getElementById('IconsDiv').style.display='none';">
(в FireFox быстро всё).

Заранее прошу прощения, если такое уже было. Не нашёл поиском.
...
Рейтинг: 0 / 0
24.09.2009, 14:21
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215028
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
потому что стиль, прописанный в аттрибуте, в любом случае сильнее, чем из css
...
Рейтинг: 0 / 0
24.09.2009, 14:24
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215034
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
KeyKeeper
Код: plaintext
<div ID="IconsDiv" runat="server" class="icons" style="display: none;">
Вот он не меняется при изменении класса и принимает окончательное решение насчет видимости
...
Рейтинг: 0 / 0
24.09.2009, 14:25
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215044
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечKeyKeeper
Код: plaintext
<div ID="IconsDiv" runat="server" class="icons" style="display: none;">
Вот он не меняется при изменении класса и принимает окончательное решение насчет видимостиОё... Ну я глупый хомиЧ )))
Т.е. достаточно его убрать и усё?
...
Рейтинг: 0 / 0
24.09.2009, 14:28
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215050
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
KeyKeeperЯростный МечKeyKeeper
Код: plaintext
<div ID="IconsDiv" runat="server" class="icons" style="display: none;">
Вот он не меняется при изменении класса и принимает окончательное решение насчет видимостиОё... Ну я глупый хомиЧ )))
Т.е. достаточно его убрать и усё?И назначить для li изначально класс bg_na
...
Рейтинг: 0 / 0
24.09.2009, 14:29
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215071
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечИ назначить для li изначально класс bg_naА. Ну, да, это конечно вы правы.
Исправил. Работает. Это решение однозначно лучше чем с javascript. Но, к сожалению, оно работает так же медлено в IE... :( И это при всего лишь 109-ти таких li на страничке (в трёх разных ul).
У вас есть идеи, как ускорить? Или это уже только от браузера зависит?
...
Рейтинг: 0 / 0
24.09.2009, 14:33
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215074
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Кстати, спасибо вам, Яростный Меч! Я бы сам долго ковырялся с отладкой css...
...
Рейтинг: 0 / 0
24.09.2009, 14:34
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215087
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Для начала попробуйте
Код: plaintext
1.
2.
.bg_a .icons { display: inline; }
.bg_na .icons { display: none; }

Просто убрали ul li. Где-то читал, что так будет быстрее
...
Рейтинг: 0 / 0
24.09.2009, 14:37
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215107
Фотография mahoune
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mahoune
Участник
А непроще использовать hover в стилях и там всякие хитрые псевдо стили и селекторы ?

Код: plaintext
.mahoune.
...
Рейтинг: 0 / 0
24.09.2009, 14:42
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215115
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечДля начала попробуйте
Код: plaintext
1.
2.
.bg_a .icons { display: inline; }
.bg_na .icons { display: none; }

Просто убрали ul li. Где-то читал, что так будет быстрееТо же самое. На глаз никаких отличий нема. :(
...
Рейтинг: 0 / 0
24.09.2009, 14:44
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215120
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
mahouneА непроще использовать hover в стилях и там всякие хитрые псевдо стили и селекторы ?

Код: plaintext
.mahoune.
Если учитывается IE6, то надо будет помещать <li> в <a>, а для а уже прописывать, псевдоклассы только для а работают в ИЕ6
...
Рейтинг: 0 / 0
24.09.2009, 14:45
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215135
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечЕсли учитывается IE6, то надо будет помещать <li> в <a>, а для а уже прописывать, псевдоклассы только для а работают в ИЕ6IE6 учитывается. Не совсем догнал как применять... Так?:

Код: plaintext
<ul class='bg'><a><li>...</li></a></ul>
Код: plaintext
1.
.bg a { display: none } 
.bg a:hover { display: inline }
...
Рейтинг: 0 / 0
24.09.2009, 14:49
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215138
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Люблю такой брутальный способ:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<style>
	a.hider {text-decoration:none;cursor:default} /*и прочее по вкусу*/
	a.hider div {display:none}
	a.hider:hover div {display:inline}
</style>

<ul>
  <li>
	<a href="#" class="hider">
      <span id="something">Какой-то текст...</span>
      <div ID="IconsDiv" runat="server" class="icons">
        img ...
      </div>
	</a>
  </li>
</ul>
В <a> ведь можно запихнуть все что угодно.

Jah loves you.
...
Рейтинг: 0 / 0
24.09.2009, 14:50
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215156
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
KeyKeeperТо же самое. На глаз никаких отличий нема. :(Попробуйте тогда через ДОМ, но вот так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<ul>
  <li onmouseover="this.firstChild.nextSibling.style.display='';"
      onmouseout="this.firstChild.nextSibling.style.display='none';"><span id="something">Какой-то текст...</span><div ID="IconsDiv" runat="server" class="icons" style="display: none;">
        <img ... />
      </div>

  </li>
</ul>

Элементам пришлось немного "уплотниться" в ХТМЛ, чтоб firstChild.nextSibling четко работали
...
Рейтинг: 0 / 0
24.09.2009, 14:53
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215158
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
AntonariyЛюблю такой брутальный способ:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<style>
	a.hider {text-decoration:none;cursor:default} /*и прочее по вкусу*/
	a.hider div {display:none}
	a.hider:hover div {display:inline}
</style>

<ul>
  <li>
	<a href="#" class="hider">
      <span id="something">Какой-то текст...</span>
      <div ID="IconsDiv" runat="server" class="icons">
        img ...
      </div>
	</a>
  </li>
</ul>
В <a> ведь можно запихнуть все что угодно.

Jah loves you. Спасибо. Сейчас тоже попробую...
...
Рейтинг: 0 / 0
24.09.2009, 14:54
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215185
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечKeyKeeperТо же самое. На глаз никаких отличий нема. :(Попробуйте тогда через ДОМ, но вот так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<ul>
  <li onmouseover="this.firstChild.nextSibling.style.display='';"
      onmouseout="this.firstChild.nextSibling.style.display='none';"><span id="something">Какой-то текст...</span><div ID="IconsDiv" runat="server" class="icons" style="display: none;">
        <img ... />
      </div>

  </li>
</ul>

Элементам пришлось немного "уплотниться" в ХТМЛ, чтоб firstChild.nextSibling четко работалиЭээм... А если у меня IconsDiv не первый блок внутри ul после "Какой-то текст..." ? Надо тогда не nextSibling брать, а "докапываться" до него, да?
Либо несколько раз nextSibling. Либо
...
Рейтинг: 0 / 0
24.09.2009, 15:02
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215190
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
KeyKeeperа "докапываться" до него, да?
Либо несколько раз nextSibling. ЛибоТам да. Смотря по ситуации.
...
Рейтинг: 0 / 0
24.09.2009, 15:03
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215237
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Яростный МечKeyKeeperа "докапываться" до него, да?
Либо несколько раз nextSibling. ЛибоТам да. Смотря по ситуации.Либо юзать this.childNodes[x], где х - номер чилда. Но чилд в свою очередь может быть не в LI, а в другом чилде, тогда комбинорованно...

Если выражение получится совсем сложным, то в LI при первом обращении можно сохранить ссылку на необходимый элемент, потом обращаться по этой ссылке, так будет быстрее всего.

Если вариант Antonariy достаточный по скорости, то лучше всего на нем остановиться и дальше не копать.
...
Рейтинг: 0 / 0
24.09.2009, 15:18
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215263
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечЛибо юзать this.childNodes[x], где х - номер чилда. Но чилд в свою очередь может быть не в LI, а в другом чилде, тогда комбинорованно...

Если выражение получится совсем сложным, то в LI при первом обращении можно сохранить ссылку на необходимый элемент, потом обращаться по этой ссылке, так будет быстрее всего.

Если вариант Antonariy достаточный по скорости, то лучше всего на нем остановиться и дальше не копать.К сожалению, мне пока не удалось реализовать его.
Общую таблицу стилей писал не я, так что просто что-то мешается, видимо.

То есть проблема решается его способом по вашему мнению?

А чем вообще можно объяснить тормознутость? Только реализацией IE?
...
Рейтинг: 0 / 0
24.09.2009, 15:26
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215293
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
KeyKeeperА чем вообще можно объяснить тормознутость? Только реализацией IE?Скорее всего.

По идее прямое указание стиля должно давать бОльшую производительность, чем переназначение класса (ведь придется просматривать таблицу стилей, делать какие-то выводы...). ДОМ в первом посте мог тормозить из-за getElementById (да и переназначение классов там тоже есть)
...
Рейтинг: 0 / 0
24.09.2009, 15:34
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215313
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
KeyKeeperК сожалению, мне пока не удалось реализовать его.Хмм... А почему? Вариант готовый, рабочий. Если добавить стили прямо в ХТМЛ, после других элементов <style>.
На всякий случай выставить !important
...
Рейтинг: 0 / 0
24.09.2009, 15:38
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215330
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечСкорее всего.

По идее прямое указание стиля должно давать бОльшую производительность, чем переназначение класса (ведь придется просматривать таблицу стилей, делать какие-то выводы...). ДОМ в первом посте мог тормозить из-за getElementById (да и переназначение классов там тоже есть)Понятненько... ) В моём варианте я больше всего грешил на getElementById. Порноподход, имхо.

Яростный МечKeyKeeperК сожалению, мне пока не удалось реализовать его.Хмм... А почему? Вариант готовый, рабочий. Если добавить стили прямо в ХТМЛ, после других элементов <style>.
На всякий случай выставить !important
Потому что есть ещё дела... Невнимательность, возможно. Сейчас попробую ще раз.
...
Рейтинг: 0 / 0
24.09.2009, 15:41
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215367
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Яростный МечKeyKeeperК сожалению, мне пока не удалось реализовать его.Хмм... А почему? Вариант готовый, рабочий. Если добавить стили прямо в ХТМЛ, после других элементов <style>.
На всякий случай выставить !important Вот снова написал, не пашет. Отображается только блок, который должен быть скрыт по умолчанию. Остальное скрыто. Перемещение курсора не меняет ничьей видимости.
...
Рейтинг: 0 / 0
24.09.2009, 15:53
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215384
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
KeyKeeperВот снова написал, не пашет. Отображается только блок, который должен быть скрыт по умолчанию. Остальное скрыто. Перемещение курсора не меняет ничьей видимости.Упс, моя лажа. Тегом <a> обернул не тот кусок, а всё... Но hider не скрывает ни фига в ie...
...
Рейтинг: 0 / 0
24.09.2009, 15:58
| Ответить | Цитировать | Написать  
Про изменение дочерних стилей при изменении родительского класса
    #36215471
Фотография KeyKeeper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
KeyKeeper
Участник
Способ с <a class="hider"> показал ту же низкую производительность, что и остальные...
Кроме того, он не подходит мне, т.к. помимо картинок оборачиваются и другие теги <a>, что некорректно.
Придётся использовать способ Яростного меча
Код: plaintext
1.
2.
.bg_a .icons { display: inline; }
.bg_na .icons { display: none; }
...
Рейтинг: 0 / 0
24.09.2009, 16:28
| Ответить | Цитировать | Написать  
25 сообщений из 28, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Про изменение дочерних стилей при изменении родительского класса
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=279&tid=1454235]:
 0ms
get settings:
 10ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 47ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 207ms
total:  353ms
созд. / загр.: 353ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]