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

336

one

2 августа 2018, 14:56

707

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

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

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

Решения для автоматизации действий ( https://www.facebook.com/automationstudio20/ ) в интернете.

S

469

Sitealert

2 августа 2018, 18:06

#1

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

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

1

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

336

one

2 августа 2018, 18:15

#2

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

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

Z0

757

ziliboba0213

2 августа 2018, 18:18

#3

Sitealert:

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

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

2

336

one

2 августа 2018, 18:39

#4

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

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

S

469

Sitealert

2 августа 2018, 19:05

#5

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

1

Z0

757

ziliboba0213

2 августа 2018, 19:09

#6

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

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


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

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

1

336

one

5 августа 2018, 09:14

#7

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

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

1

Что такое Power BI и зачем это нужно бизнесу

VK приобрела 70% в структуре компании-разработчика red_mad_robot