Исправить hover эффект?

Question

[Олег]

Доброго времени суток есть вот такой кусок кода https://jsfiddle.net/b9m08jvg/ Можно ли сделать так что бы hover эффект срабатывал только если навести на ссылку в теге "a"но не на тег "ul " ?

Comments

[Василий Варюхин]

Имеется ввиду hover-эффект с градиентом подложки?

Answer 1

[Ankhena]

Можно ли сделать так что бы hover эффект срабатывал только если навести на ссылку в теге "a"но не на тег "ul " ?

Да, можно. Он и сейчас срабатывает не на ul, а на li. А кажется вам, что на ul, потому что наведение на псевдоэлемент считается наведением и на родителя тоже, что логично.

Если надо при наведении на a, то и перепишите это .nav-btn .nav li:before и .nav-btn .nav li:hover:before с li на a.
Чтобы не срабатывало при наведении на before задайте ему pointer-events: none;.

Comments

[Олег]

если изменяю на "а" то перестает работать ховер еффект

[Ankhena]

Олег, вероятно, потому что у вас уже висит другой ховер на a, со своими ::before и ::after. Его соответственно нужно либо переделать по другому либо перевесить в свою очередь на span или наоборот на li.

[Олег]

Ankhena, Да там был другой ховер который висел на "а", я его для теста закоментил и перевесил "а" на ховер который накладывал градиент, но тогда получатся что градиет стал появляться только на "li", а не на весь bg

[Ankhena]

Олег, осталось разобраться кто кому relative

[Олег]

Ankhena, bg relative, а вот hover absolute

[Ankhena]

Олег,

bg relative, а вот hover absolute

Что??

relative должен быть у ul (или у чего там должен появится градиент) и между ними не должно быть других relative, иначе absolute будет считаться от него.

[Олег]

Ankhena, кажется уже что то запутались. У меня есть div .nav-btn его bg я назначил картинку и присвоил position: relative; используя before я сделал градиент с параметрами position: absolute; и opacity: 0; внутри данного div .nav-btn находится контейнер меню со ссылками. и вот при наведении на эту ссылку нужно что бы срабатывал hover где opacity: .9; но если я задам на ссылку hover то у меня он не работает а если на li то все ок. Я попытался объяснить еще раз, может я до этого делал это не правильно(объяснял) вот ссылка https://jsfiddle.net/b9m08jvg/ может будет более понятно. Извиняюсь, что так глупо объясняю, начал обучатся пару недель назад и еще не очень владею информацией.

[Ankhena]

Олег,

кажется уже что то запутались.

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

https://jsfiddle.net/9hxqfbcL/
переделайте то, что было в ::before и ::after к ссылке другим способом.

[Ankhena]

Олег, разобрались?

[Олег]

Ankhena, Появление градиетна по наведению именно на "а", сделал, думаю как теперь как вернуть работу before и after линии над элементами меню

[Ankhena]

Олег,
Чего тут думать? Не такой большой выбор.
1. ::after у а свободен остался. Фон и бордер.
2. span внутри a
3. li и а сделать одинаковыми по размеру. Первый эффект переписать на li, второй на а.
4. Использовать js.

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