Как при наведении на ссылку отображать объекты под классом visibility: hidden;
Есть
<DIV id="smile" class="notOfficial"></DIV> <DIV id="tabletWithChips" class="notOfficial"></DIV> <DIV id="cigarettes" class="notOfficial"></DIV> <DIV id="ashTray" class="notOfficial"></DIV> <DIV id="beer" class="notOfficial"></DIV> <DIV id="magazinesPorno" class="notOfficial"></DIV> <DIV id="notepadPorno" class="notOfficial"></DIV> В css прописано #header .notOfficial { visibility: hidden; } Как при наведении на определённую ссылку на странице отображать скрытые блоки средствами javascript |
Так же, использовать css.
<style> #header .notOfficial { visibility: hidden; } #header.showNotOficcial .notOfficial { visibility: visible; } </style> <div id="header"> <DIV id="smile" class="notOfficial">Smile</DIV> <DIV id="tabletWithChips" class="notOfficial">Tablet With Chips</DIV> <DIV id="cigarettes" class="notOfficial">Cigarettes</DIV> <DIV id="ashTray" class="notOfficial">Ash Tray</DIV> <DIV id="beer" class="notOfficial">Beer</DIV> <DIV id="magazinesPorno" class="notOfficial">Porn Zines</DIV> <DIV id="notepadPorno" class="notOfficial">Porn Pad</DIV> </div> <a href="javascript://" onmouseover="document.getElementById('header').className = 'showNotOficcial'" onmouseout="document.getElementById('header').className = ''">Блекджек и шлюхи</a> Лучше, конечно, использовать addClass и removeClass , но для примера, думаю, пойдет. |
Спасибо огромное, работает... осталось только решить, как
при наведении на эту же ссылку, пропадали объекты под class="official"??? <A id="notepad" class="official" href="#" title="#"></A> <A id="camera" class="official" href="#" title="#"></A> |
#header .notOfficial { visibility: hidden; } #header.showNotOficcial .notOfficial { visibility: visible;} #header.showNotOficcial .official { visibility: hidden;} И мой Вам совет: учите css. Это Вам очень поможет в разработке. |
Получилось.... Спасибо огромное....
Вот промер того, что я хотел.... Нажимаешь на логотип и .... :). Супер.... А реально сделать, чтобы картинки, которые подменяются, подменялись плавно туда и обратно? |
|
pavdin, не дублируйте сообщения
|
Вложений: 1
В аттаче пример. Из-за data-url он большой.
В тех браузерах, которые уже понимают css transitions, смена будет плавной. В остальных — резкой. |
Спасибо большое!!!
|
Часовой пояс GMT +3, время: 16:13. |