Блог

Главная - Вопросы по программированию - Удаление фильтра из ссылок на изображения при применении фильтра к ссылкам в том же div?

Удаление фильтра из ссылок на изображения при применении фильтра к ссылкам в том же div?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я использую huerotate для изменения цвета моих текстовых ссылок в моем div, проблема в том, что он также применяется к моим ссылкам на изображения. Я пытался удалить их только из изображений (то, что я хочу), но я просто не могу понять это. Есть идеи? (Я создал JS, чтобы в моем дизайне была кнопка для изменения цветов, и я хочу, чтобы текстовые ссылки менялись при ее нажатии, но не менялись изображения.)

 .scontent {
    max-width: 100%;
    margin: 20px 0px;
    padding: 5px 5px 5px 10px;
}

.scontent a {
    color: var(--links);
    filter: hue-rotate(var(--hue-rotate));
}

.scontent a:hover {
    color: var(--links-hover);
    filter: hue-rotate(var(--hue-rotate));
}

.scontent a img {
    filter: none !important;
}

Ответ №1:

Дело в том, что вы применяете фильтр a , но очищаете фильтр img . Это относится к :has псевдоселектору, но в настоящее время он находится в черновике, поэтому чистого CSS-решения нет. Вам нужно воспользоваться помощью JavaScript, чтобы сбросить hue-rotate фильтр для всего a , что есть img внутри него.

 let imgArr = document.querySelectorAll('.scontent a img');

[...imgArr].forEach((img)=>{
  img.parentNode.style.filter = "hue-rotate(0deg)";
}) 
 :root{
  --links: #ff0000;
  --hue-rotate: 90deg;
}
.scontent {
    max-width: 100%;
    margin: 20px 0px;
    padding: 5px 5px 5px 10px;
}

.scontent a {
    color: var(--links);
    filter: hue-rotate(var(--hue-rotate));
}

.scontent a:hover {
    color: var(--links-hover);
    filter: hue-rotate(var(--hue-rotate));
} 
 <div class="scontent">
  <a href="#">Text Link </a>
  <a href="#"><img src="https://picsum.photos/200/200" /> </a>
</div>

Метки: