Как одновременно применить hover на текст и картинку рядом с ним

Question

Картинка png. Только без такого:

div:hover img{
border: 1px solid #d7d7d7;
}
div:hover p{
color: #d7d7d7;
}

Картинка без проблем меняет цвет, а вот картинка png...

Вот часть кода:

<div class="sfd">
    <a href="#"><span>Select from dropdown</span>
    <img src="img/sfd.png" alt="Select from dropdown"></a>
</div>

.sfd span {
    font-family: Nexa-Bold;
    color: #cecece;
}

.sfd span:hover {
    color: #58159b;
    transition: 0.3s;
}

Answer 1

просто отслеживайте родителя со свойством :hover

чтобы было 2 состояния дочерних элементов:

у родителя на которого не навели

div img

и у родителя, на которого навели

div:hover img

.sfd span {
    display: inline-block;
    margin-bottom: 20px;
    
    font-size: 20px;
    font-family: Nexa-Bold;
    color: #cecece;
}

.sfd img {
    border: 1px solid red;
}

.sfd:hover img {
    border: 1px solid #d7d7d7;
    transition: 0.3s;
}

.sfd:hover span {
    color: #58159b;
    transition: 0.3s;
}

<div class="sfd">
  <a href="#">
    <span>Select from dropdown</span><br>
    <img src="https://www.google.ru/logos/doodles/2020/grandparents-day-2020-october-28-6753651837108595-l.png" alt="Select from dropdown">
  </a>
</div>

А если нет родителя, то css даёт возможность завязываться на соседей выше (если навести на текст, то и картинка изменится, но если навестись на картинку - текст не изменится, потому что до текста от картинки не "дотянуться"):

div {
        margin-bottom: 20px;
        
        font-size: 20px;
        font-family: Nexa-Bold;
        color: #cecece;
    }

    div + img {
        border: 5px solid red;
    }

    div:hover {
        color: #58159b;
        transition: 0.3s;
    }
    
    div:hover + img {
        border: 5px solid lime;
        transition: 0.3s;
    }

<div>Select from dropdown</div>
<img src="https://www.google.ru/logos/doodles/2020/grandparents-day-2020-october-28-6753651837108595-l.png" alt="Select from dropdown">

Answer 2

Что нужно делать в этой задаче:
Определить состояние по умолчанию для элементов и при наведении менять им ТОЛЬКО цвет
для .card__img Я описал состояние

.card__img {
  border: 3px solid transparent;
  filter: invert(100%);
  transition: filter var(--timing), border-color var(--timing);
}

Я задал свойства для border, размер, также указал для элемента transition, какие элементы я хочу анимировать. И также я использовал переменную timing, чтобы записать длительность и скорость анимации в одном месте.
При наведении я меняю только свойства filter, которое умеет анимироваться и свойство border-color, которое тоже умеет анимироваться

.card:hover .card__img {
  filter: invert(0);
  border-color: red;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
}

img {
  display: block;
  max-width: 100%;
  border: none;
}

:root {
  --timing: 0.5s linear;
}

.card {
  display: inline-block;
  font-size: 24px;
}

.card>*+* {
  margin-top: 15px;
}

.card__title {
  transition: color var(--timing);
}

.card__img {
  border: 3px solid transparent;
  filter: invert(100%);
  transition: filter var(--timing), border-color var(--timing);
}

.card:hover .card__title {
  color: red
}

.card:hover .card__img {
  filter: invert(0);
  border-color: red;
}

<div class="card">
  <div class="card__title">Заголовок</div>
  <div class="card__img">
    <img src="https://picsum.photos/id/0/200" alt="">
  </div>
</div>

БЛОГ НА HUSL

Как одновременно применить hover на текст и картинку рядом с ним

Ответы (2 шт):