Как сделать анимацию при наведении?

Question

[shynga]

Добрый день!
Столкнулся с такой проблемой, что при наведении на элемент происходит анимация у нескольких элементов.
То есть, есть HTML код, ниже примерная структура.

<div class="block">
  <p class="item">Text</p>
</div>
<div class="block">
  <p class="item">Text</p>
</div>
<div class="block">
  <p class="item">Text</p>
</div>
<div class="block">
  <p class="item">Text</p>
</div>

И при наведении на .block у .item должен меняться цвет, но при наведении на .block меняется цвет у всех .item.
В реальном коде больше элементов и сам код побольше, поэтому сделал такой пример.
В реальном коде нужно менять цвет заливки path в svg при наведении на блок (таких блоков 4), у каждого блока свой svg.

В чем проблема? И как ее решить?

Код

Comments

[historydev]

Покажите код

[shynga]

Владимир,

<div class="cars__item cars__item_one">
  <div class="cars__top">
    <a href="#" class="cars__wish">
      <svg width="15" height="15" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <mask id="mask0" width="12" height="12">
          <path d="M6.40438 2.71801L5.99997 3.12974L5.59556 2.71801C4.61897 1.72376 3.0589 1.60396 2.0711 2.43624C0.853665 3.46102 0.855868 5.24725 1.88573 6.29824L5.60707 10.0896C5.71347 10.1981 5.85224 10.2569 5.99997 10.2569C6.15078 10.2569 6.28714 10.1996 6.39311 10.0915L10.1135 6.30108C11.1436 5.24788 11.147 3.46199 9.92893 2.43632C8.9404 1.60527 7.38016 1.72459 6.40438 2.71801Z" fill="none" stroke="#fff" />
         </mask>
         <g mask="url(#mask0)">
           <rect width="12" height="12" fill="white" />
         </g>
       </svg>
     </a>
     <h3 class="cars__price">Buy: $99,000</h3>
       <div class="cars__quality">
         <span class="active">$</span>
         <span class="active">$</span>
         <span class="active">$</span>
         <span>$</span>
         <span>$</span>
       </div>
     </div>
     <div class="cars__bottom">
                        <h3 class="cars__title">Mercedes-Benz C63 2016</h3>
                        <div class="tags">
                            <a href="#" class="btn_tag btn">Sedan</a>
                            <a href="#" class="btn_tag btn">Used Car</a>
                            <a href="#" class="btn_tag btn">Buy Now</a>
                        </div>
                        <div class="cars__param">
                            <p class="cars__param-title">Kilometers:</p>
                            <p class="cars__value">49,000 km</p>
                        </div>
                        <div class="cars__param">
                            <p class="cars__param-title">Location:</p>
                            <div class="cars__loc">
                                <img src="assets/flag/usa.svg" alt="The USA">
                                <p>New-York</p>
                            </div>
                        </div>
                        <div class="cars__param">
                            <p class="cars__param-title">Seller:</p>
                            <div class="quality">
                                <div class="quality__stars">
                                    <svg class="active" width="12" height="13" viewBox="0 0 12 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.9687 5.31013C11.8901 5.06714 11.6746 4.89456 11.4196 4.87158L7.95612 4.55709L6.58655 1.35148C6.48556 1.11655 6.25558 0.964478 6.00005 0.964478C5.74452 0.964478 5.51453 1.11655 5.41355 1.35203L4.04398 4.55709L0.579907 4.87158C0.325385 4.89511 0.110414 5.06714 0.0314018 5.31013C-0.0476101 5.55312 0.0253592 5.81963 0.217899 5.98764L2.83591 8.28365L2.06392 11.6843C2.00743 11.9343 2.10448 12.1928 2.31194 12.3427C2.42346 12.4233 2.55392 12.4643 2.68549 12.4643C2.79892 12.4643 2.91144 12.4337 3.01243 12.3733L6.00005 10.5877L8.98657 12.3733C9.20511 12.5048 9.4806 12.4928 9.6876 12.3427C9.89516 12.1923 9.99212 11.9338 9.93563 11.6843L9.16364 8.28365L11.7816 5.98809C11.9742 5.81963 12.0477 5.55357 11.9687 5.31013V5.31013Z"
                                            fill="#E1E8EE" />
                                    </svg>
                                    <svg class="active" width="12" height="13" viewBox="0 0 12 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.9687 5.31013C11.8901 5.06714 11.6746 4.89456 11.4196 4.87158L7.95612 4.55709L6.58655 1.35148C6.48556 1.11655 6.25558 0.964478 6.00005 0.964478C5.74452 0.964478 5.51453 1.11655 5.41355 1.35203L4.04398 4.55709L0.579907 4.87158C0.325385 4.89511 0.110414 5.06714 0.0314018 5.31013C-0.0476101 5.55312 0.0253592 5.81963 0.217899 5.98764L2.83591 8.28365L2.06392 11.6843C2.00743 11.9343 2.10448 12.1928 2.31194 12.3427C2.42346 12.4233 2.55392 12.4643 2.68549 12.4643C2.79892 12.4643 2.91144 12.4337 3.01243 12.3733L6.00005 10.5877L8.98657 12.3733C9.20511 12.5048 9.4806 12.4928 9.6876 12.3427C9.89516 12.1923 9.99212 11.9338 9.93563 11.6843L9.16364 8.28365L11.7816 5.98809C11.9742 5.81963 12.0477 5.55357 11.9687 5.31013V5.31013Z"
                                            fill="#E1E8EE" />
                                    </svg>
                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.9687 5.31013C11.8901 5.06714 11.6746 4.89456 11.4196 4.87158L7.95612 4.55709L6.58655 1.35148C6.48556 1.11655 6.25558 0.964478 6.00005 0.964478C5.74452 0.964478 5.51453 1.11655 5.41355 1.35203L4.04398 4.55709L0.579907 4.87158C0.325385 4.89511 0.110414 5.06714 0.0314018 5.31013C-0.0476101 5.55312 0.0253592 5.81963 0.217899 5.98764L2.83591 8.28365L2.06392 11.6843C2.00743 11.9343 2.10448 12.1928 2.31194 12.3427C2.42346 12.4233 2.55392 12.4643 2.68549 12.4643C2.79892 12.4643 2.91144 12.4337 3.01243 12.3733L6.00005 10.5877L8.98657 12.3733C9.20511 12.5048 9.4806 12.4928 9.6876 12.3427C9.89516 12.1923 9.99212 11.9338 9.93563 11.6843L9.16364 8.28365L11.7816 5.98809C11.9742 5.81963 12.0477 5.55357 11.9687 5.31013V5.31013Z"
                                            fill="#E1E8EE" />
                                    </svg>
                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.9687 5.31013C11.8901 5.06714 11.6746 4.89456 11.4196 4.87158L7.95612 4.55709L6.58655 1.35148C6.48556 1.11655 6.25558 0.964478 6.00005 0.964478C5.74452 0.964478 5.51453 1.11655 5.41355 1.35203L4.04398 4.55709L0.579907 4.87158C0.325385 4.89511 0.110414 5.06714 0.0314018 5.31013C-0.0476101 5.55312 0.0253592 5.81963 0.217899 5.98764L2.83591 8.28365L2.06392 11.6843C2.00743 11.9343 2.10448 12.1928 2.31194 12.3427C2.42346 12.4233 2.55392 12.4643 2.68549 12.4643C2.79892 12.4643 2.91144 12.4337 3.01243 12.3733L6.00005 10.5877L8.98657 12.3733C9.20511 12.5048 9.4806 12.4928 9.6876 12.3427C9.89516 12.1923 9.99212 11.9338 9.93563 11.6843L9.16364 8.28365L11.7816 5.98809C11.9742 5.81963 12.0477 5.55357 11.9687 5.31013V5.31013Z"
                                            fill="#E1E8EE" />
                                    </svg>
                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.9687 5.31013C11.8901 5.06714 11.6746 4.89456 11.4196 4.87158L7.95612 4.55709L6.58655 1.35148C6.48556 1.11655 6.25558 0.964478 6.00005 0.964478C5.74452 0.964478 5.51453 1.11655 5.41355 1.35203L4.04398 4.55709L0.579907 4.87158C0.325385 4.89511 0.110414 5.06714 0.0314018 5.31013C-0.0476101 5.55312 0.0253592 5.81963 0.217899 5.98764L2.83591 8.28365L2.06392 11.6843C2.00743 11.9343 2.10448 12.1928 2.31194 12.3427C2.42346 12.4233 2.55392 12.4643 2.68549 12.4643C2.79892 12.4643 2.91144 12.4337 3.01243 12.3733L6.00005 10.5877L8.98657 12.3733C9.20511 12.5048 9.4806 12.4928 9.6876 12.3427C9.89516 12.1923 9.99212 11.9338 9.93563 11.6843L9.16364 8.28365L11.7816 5.98809C11.9742 5.81963 12.0477 5.55357 11.9687 5.31013V5.31013Z"
                                            fill="#E1E8EE" />
            </svg>
          </div>
          <p class="quality__reviews">(23 Reviews)</p>
          <img src="assets/icon/verify.svg" alt="Verified" class="quality__verify">
        </div>
      </div>
    </div>
  </div>

.cars__item {
    background: #fff;
    box-shadow: 0 2px 2px rgba(51, 65, 80, .04);
    border-radius: 5px;
    overflow: hidden;
    width: 24%;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.cars__wish {
    background: rgba(0, 0, 0, .4);
    padding: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 5px;
    margin-left: auto;
    line-height: 19px;
    margin-bottom: 82px;
}

.cars__wish:hover path {
    fill: white;
}

Код одной карточки (HTML). Они практически ничем не отличаются. Ну CSS также весь не стал, только стили при наведении, которые должны меняться.

[shynga]

Владимир, Сейчас к codepen.io загружу

[shynga]

Владимир, https://codepen.io/shynga/pen/wvKqOxJ вот. Там где секция Recently Added у карточек при наведении, как то странно работает

[shynga]

Владимир, https://codepen.io/shynga/pen/Baodbqp уменьшил код

[historydev]

shynga, тут всё просто, сейчас скину готовое

Answer 1

[Андрей Федоров]

Что? https://codepen.io/aliencash/pen/bGVrZvq

Comments

[shynga]

https://codepen.io/shynga/pen/wvKqOxJ вот. Не могли бы посмотреть. Сама проблема в секции Recently added у карточек

[shynga]

https://codepen.io/shynga/pen/Baodbqp уменьшил код

Answer 2

[historydev]

Вот: click