Как такое реализовать ?

Question

[Сергей Коваль]

Как сделать чтобы при выборе элемента списка, внизу появлялась более дополнительная информация ?
veka.ua/products.html
И при наведении на картинку внизу появлялась информация ?

Comments

[yiiiiiii]

css табы почитай, самое простое.
Можно подключить js или сразу ajax, только это уже заморочка на пару часиков, если не знаток.

Answer 1

[Deleted Deleted]

Ну, что касается наведения мышкой, тут могло быть без скрипта.

.class:hover .subclass0 {display:none;}
.class:hover .subclass {display:block;}

Если отображение по клику - тут-то конечно нужен javascript

Comments

[Сергей Коваль]

мда....в другом случае использовал именно :hover, а здесь забыл ))

[Сергей Коваль]

о так уже слышали ? tympanus.net/Development/HoverEffectIdeas

Answer 2

[whats]

Почему никто не напишет - Правой кнопкой - Посмотреть исходный код ? Почему вопросы все тупее и тупее.

Comments

[Сергей Коваль]

@whats я не хочу содрать код, а хочу понять КАК ?

Answer 3

[sasha]

там используется jquery

Comments

[Сергей Коваль]

и в одном случаи и во втором ?

[Eugene Obrezkov]

jQuery везде используется

[Сергей Коваль]

@ghaiklor как же мне не хватает времени все учить)))

[Eugene Obrezkov]

@Shadow_wayfarer вообще-то jQuery как раз и призван для того, чтобы всё не учить. И получаются заурядные кодеры, которые возводят его в новый язык программирования :)

P.S. Для тех кто будет писать что я типо по себе ровняю и т.п., уточняю. Такие кодеры получаются больше половины, я не обо всех :)

[Сергей Коваль]

@ghaiklor да я про то что времени вообще нет, взяться за что-то новое для себя )

Answer 4

[Eugene Obrezkov]

Самый простой способ. При наведении мышкой на элемент в списке скрываем один блок и показываем второй.

Простенькая реализация.

var elements = document.querySelectorAll('.item');
elements.addEventListener('mouseenter', function() {
    whatNeedToShow.style.display = 'block';
}, false);
elements.addEventListener('mouseleave', function() {
    whatNeedToShow.style.display = 'none';
}, false);

Comments

[Сергей Коваль]

блин, а здесь все на много интереснее чем сухой html+css. Это jQ ?

[Eugene Obrezkov]

@Shadow_wayfarer это можно и на чистом CSS3 сделать, используя псевдоклассы. Нет, это не с помощью jQuery. Это чистый JavaScript.

[Сергей Коваль]

@ghaiklor с помощью этих htmlbook.ru/css/cat/pseudoclass псевдокласов ?

[Eugene Obrezkov]

@Shadow_wayfarer да. @BroomPerson уже написал как :)