Наведение на кнопку в блоке, блок выделяется, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте.

Есть блок, в блоке кнопка, при наведении на кнопку блок должен выделятся, как реализовать? я пытался сделать и не вышло.
Для выделения блока я добавил тень.

Смотрите тут: https://jsfiddle.net/fnaoqcyb/1/

Answer 1

[Михаил Румянцев]

Кажется можно без js и без дополнительных врапперов.
Codepen
Недостаток такого подхода в том, что свойство pointer-events не поддерживается старыми IE

Comments

[Антон Вебсайтовский]

щас вроде как ie9 мало у кого встретишь.

[Антон Вебсайтовский]

а как к моему методу прикрутить, чет попробовал и не вышло.

[Михаил Румянцев]

z-index'ы и position'ы внимательно перепроверьте.

Answer 2

[Денис Букреев]

С помощью JavaScript + jQuery

$('button').on('mouseenter', function()
{
    $(this).closest('.block').addClass('hover');
});

Comments

[Антон Вебсайтовский]

Без js не как?

[Денис Букреев]

Антон Вебсайтовский: никак

Answer 3

[Максим Люмен]

Если два элемента поместить в один блок обёртку то можно и без js
https://jsfiddle.net/avuncvwy/

Comments

[Антон Вебсайтовский]

Так ведь выходит и так что один элемент во внутри другого, или по мимо этого еще обернуть в див и сделать класс.?

[Максим Люмен]

Антон Вебсайтовский: я ответ изменил - привёл пример

[Антон Вебсайтовский]

сделал так https://jsfiddle.net/fnaoqcyb/1/ но, а как теперь сделать чтобы я на кнопку наводил и к блоку применялась тень.

[Максим Люмен]

Антон Вебсайтовский: https://jsfiddle.net/fnaoqcyb/2/ без js ни как , потомок на родителя ни как не моет повлиять

[Антон Вебсайтовский]

Максим Люмен: ах жаль.

Answer 4

[Константин Самсин]

Дополню первый пост

$('button').on('mouseenter', function()
{
    $(this).closest('.block').addClass('hover');
});
$('button').on('mouseleave', function() {
    $(this).closest('.block').removeClass('hover');
  });

Comments

[Максим Люмен]

toggleClass хватит

Answer 5

[Laid]

https://jsfiddle.net/fnaoqcyb/3/
Без js. html + css. Правильно сделали, в конце чутка ошиблись.

Comments

[Антон Вебсайтовский]

Вы не поняли, я хотел навести на кнопку подробнее и чтобы у меня блок весь выделился ! то есть появилась тень.

Answer 6

[Егор Рублёв]

https://jsfiddle.net/salofun/fnaoqcyb/4/
На jQuery