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

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

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

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

Код: plaintext
.mahoune.
Если учитывается IE6, то надо будет помещать <li> в <a>, а для а уже прописывать, псевдоклассы только для а работают в ИЕ6
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.09.2009, 14:49
    #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:50
    #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:53
    #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:54
    #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, 15:02
    #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:03
    #36215190
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Про изменение дочерних стилей при изменении родительского класса
KeyKeeperа "докапываться" до него, да?
Либо несколько раз nextSibling. ЛибоТам да. Смотря по ситуации.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.09.2009, 15:18
    #36215237
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Про изменение дочерних стилей при изменении родительского класса
Яростный МечKeyKeeperа "докапываться" до него, да?
Либо несколько раз nextSibling. ЛибоТам да. Смотря по ситуации.Либо юзать this.childNodes[x], где х - номер чилда. Но чилд в свою очередь может быть не в LI, а в другом чилде, тогда комбинорованно...

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

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

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

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

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

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

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

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

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


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