Вопрос:
У меня проблема с моим кодом css.
Как вы видите, у меня есть фильтр на элементе li, но он накладывает другие элементы. Мне нужно, чтобы другие два элемента не имели фильтра:
Есть ли возможность сделать это.
.main { width:300px; height:300px; background-color:blue; list-style:none; } .button { position: absolute; top: 35% ; height: 30px; width: 120px; display: none; z-index: 99; background-color:black; color:white; } .icon { width: 30px; position: absolute; z-index: 99; display: none; width:100px; } .main:hover > .button { display: block; filter: none; } .main:hover > .icon { display: block; filter: none; } .main:hover { filter: brightness(50%); transition: 0.5s; }<li class=»main»> <img src=»https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png» class=»icon» /> <a class=»button» href=»#»>Button</a> </li>Лучший ответ:
Вы не можете так поступать. У детей зависит их родительский стиль.
Это работает как каскадные таблицы стилей.
Я предлагаю вам использовать псевдоэлемент, чтобы заставить его работать так, как вы хотите, чтобы затронуть только псевдоэлемент.
См. Комментарии в фрагменте:
.main { position: relative; /* Added */ width: 300px; height: 300px; list-style: none; } .main::before { /* Added */ content: »; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: blue; transition: 0.5s; } .button { position: absolute; top: 35%; height: 30px; width: 120px; display: none; z-index: 99; background-color: black; color: white; } .icon { width: 30px; position: absolute; z-index: 99; display: none; width: 100px; } .main:hover>.button { display: block; /* filter: none; Commented */ } .main:hover>.icon { display: block; /* filter: none; Commented */ } .main:hover::before { /* Modified */ filter: brightness(50%); }<li class=»main»> <img src=»https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png» class=»icon» /> <a class=»button» href=»#»>Button</a> </li>
Надеюсь, поможет.
Ответ №1
Я предлагаю псевдоэлемент для этой задачи. Ваш класс.main сохраняет родительскую позицию с позицией: relative, Пока изображение и кнопка становятся зависимыми от абсолютной позиции. При наведении на элемент с классом.main добавьте псевдоэлемент :: before и примените необходимые стили, как указано в коде ниже.
.main { width:300px; height:300px; list-style:none; position:relative; background-color:blue; } .button { position: absolute; top: 35% ; height: 30px; width: 120px; display: none; z-index: 99; background-color:black; color:white; } .icon { width: 30px; position: absolute; z-index: 999999; display: none; width:100px; } .main:hover>.button { display: block; } .main:hover>.icon { display: block; } .main:hover::before { content: «»; top: 0; bottom: 0; right: 0; left: 0; position:absolute; background-color:blue; transition: 0.5s; filter: brightness(50%); }<li class=»main»> <img src=»https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png» class=»icon» /> <a class=»button» href=»#»>Button</a> </li>