Как изменить тот же стиль css после наведения родительского элемента на элемент дочернего тега?

Question

У меня html сегментов кода ниже,

<div class="div-builder">
    <div>
        <a href="#">
            <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo">
        </a>
        <h3>Title</h3>
        <i>sub-title</i>
    </div>
    <hr/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
</div>

Мне нужно сделать это, когда я наведу курсор на класс .div-builder, тогда его css цвет фона будет изменен в соответствии с ниже css,

.div-builder{ background-color: lightyellow; }

И результат будет такой, как на изображении ниже,

Снова, когда я наведусь на <img> пометьте, тогда также следует изменить цвет фона на lightyellow, но в то же время цвет фона класса .div-builder не будет таким же lightyellow. Результат будет таким, как на изображении ниже:

Здесь тег <img> может быть дочерним элементом любого уровня класса .div-builder. Этот тег <img> не является дочерним тегом того же уровня в соответствии с указанным выше сегментом кода HTML, его можно изменять любым дочерним тегом уровня.

Таким же образом, <h3> или <i> или <p> Цвет фона тега должен быть изменен на светло-желтый, когда он будет наведен мышью. Но в то же время цвет фона класса .div-builder не изменится как светло-желтый. После наведения на тег <p> результат будет следующим:

Как сделать эффект наведения на CSS?

Или

Как сделать это событие щелчка вместо эффекта наведения на jQuery?

Answer 1

Братан, вот твой ответ, надеюсь, тебе понравится. https://codepen.io/Ultra_Hopeful/pen/MWawrGK

function hoveref() {
      $(".div-builder")
        .find("h3,i,p,img,a")
        .hover(
          function () {
            $(this).css("background", "SpringGreen");
            $(".div-builder").css("background", "initial");
          },
          function () {
            $(this).css("background", "initial");
            $(".div-builder").css("background", "SpringGreen");
          }
        );
    }
    function hoverafter() {
      $(".div-builder").css("background", "initial");
    }

<div class="div-builder" onmouseenter="hoveref()" onmouseleave="hoverafter()">
      <div>
        <a href="#" width="100%">
          <img src="https://picsum.photos/id/4/300" alt="Logo">
        </a>
        <h3 class="">Title</h3>
        <i>sub-title</i>
      </div>
      <hr />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

если я правильно вас понял, ваша задача - изменить фон элемента, когда курсор наведен на него? это действительно простая задача: ее можно достичь с помощью CSS 1.add к css ": hover", как это (p для абзаца)

 p:hover {
      background-color: red;
      font-size: 20px;
 }

2.done :) [ измените p на любой id \ class, который вы хотите]

изменение фона при наведении Я надеялся, что это помогло

, если вы хотите изменить элементы капсулы при наведении курсора

.hoverME:hover { background:red; }

и затем деформируйте элементы с помощью div

<div  class="hoverME">
<p>i will be warrped by red background</p>
<p>me too!! y</p>
</div>

Answer 3

Как это?

body {
    background-color: rgba(173, 173, 173, 0.9);
}


.div-builder {
    background: white;
}

.div-builder div:hover {
    background: red;
}

    <div class="div-builder">
        <div>
            <a href="#">
                <img src="https://static.javatpoint.com/htmlpages/images/html-tutorial.png" alt="Logo">
            </a>
        </div>
        <div>
            <h3>Title</h3>
        </div>

    <div>
         <i>sub-title</i>    
    </div>
        <hr/>
        <div>
            <p>Lorem Ispsum is simply dummy text of the printing and typesetting ...</p>
        </div>
    </div>