При наведении смена блока

one
На сайте с 15.04.2007
Offline
318
one
684

Друзья, подскажите решение.

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

Когда то мне попадалось подобное на сайтах, не могу вспомнить где, что бы привести в качестве примера.

LimonBucks.com (http://LimonBucks.com) - Зарабатывай лимоны и меняй их на крутые призы! Решения для автоматизации действий (https://www.facebook.com/automationstudio20/) в интернете.
S
На сайте с 30.09.2016
Offline
459
#1

.parent .child_visible{
display: block;
}
.parent .child_hidden{
display: none;
}
.parent:hover .child_visible{
display: none;
}
.parent:hover .child_hidden{
display: block;
}

В старом IE криво работает (в ссылку оборачивать надо).

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
one
На сайте с 15.04.2007
Offline
318
one
#2

А, такое решение предлагаете. Благодарю! Буду пробовать, как дойду в версте до этого момента. Если что, апну топик.

Старые броузеры как бы все равно, не интересуют.

Z0
На сайте с 03.09.2009
Offline
731
#3
Sitealert:

В старом IE криво работает (в ссылку оборачивать надо).

Можно тоже самое через jquery :)

one
На сайте с 15.04.2007
Offline
318
one
#4
ziliboba0213:
Можно тоже самое через jquery :)

Можно примеры увидеть?

S
На сайте с 30.09.2016
Offline
459
#5

Через скрипт не всё так однозначно, тоже "подводные камни" есть. Надо по месту решать.

Z0
На сайте с 03.09.2009
Offline
731
#6
one:
Можно примеры увидеть?

Так тоже самое получается...


$('.parent').hover(function(){
$('.child_visible').hide();
$('.child_hidden').show();
},function(){
$('.child_visible').show();
$('.child_hidden').hide();
});

Примерно так, если не попутал ничего..

one
На сайте с 15.04.2007
Offline
318
one
#7

Спасибо всем участвующим! Нашел примеры немного поинтереснее, с эффектами. Может кому еще пригодиться.

https://davidwalsh.name/demo/css-flip.php

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий