Как использовать jquery hover для элемента div и тега html внутри одного элемента div

Question

Я новичок в jquery, я пытался использовать событие .hover, но у меня возникли проблемы, и я не нашел пути его решения. то, что я хочу сделать, это когда я вставляю div, я хочу добавить цвет границы к тому div, который я смог сделать, и в то же время я также хотел бы иметь тег h4 для изменения цвета, в то время как изображение для изменить непрозрачность изображения с каким-либо текстом.

<div class="layout">
            <div class="col-1 welcomediv">
                <img src="images/electricalinstallation.png" class=" img-responsive" alt="Image">
                <div class="col-1-text">
                    <div  class="wh4">
                        <h4>My head 1</h4>
                    </div>
                    <center>
                        <hr class="col-1-hr">
                    </center>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
                </div>
            </div>
            <div class="col-1 welcomediv">
                <div class="col-1-text">
                    <div  class="wh4">
                        <h4>My head 2</h4>
                    </div>
                    <center>
                        <hr class="col-1-hr">
                    </center>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
                </div>
                <img src="images/Transformer_Installation.jpg" class="img-responsive" alt="Image">
            </div>
            <div class="col-1 welcomediv">
                <img src="images/House-Wiring.jpg" class="img-responsive" alt="Image">
                <div class="col-1-text">
                    <div  class="wh4">
                        <h4>My head 3</h4>
                    </div>

                    <center>
                        <hr class="col-1-hr">
                    </center>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
                </div>
            </div>
        </div>

jquery код

$('.welcomediv').hover(function(){
    $(this).addClass('col-1hover');
    $('.wh4').addClass('col-1-texhover');
  },
  function(){
    $(this).removeClass('col-1hover');
    $('.wh4').removeClass('col-1-texhover');
  });

CSS код

.col-1-texhover {
   color:#f7b72f;
 }
.col-1hover {
   border-color: #f7b72f;
 }

я буду очень нравится ваша помощь Заранее спасибо

Answer 1

Вам нужно получить элемент внутри элемента наведения, вы можете указать context с jQuery или использовать метод find().

$('.welcomediv').hover(function() {
    $(this).addClass('col-1hover');
    $('.wh4', this).addClass('col-1-texhover');
    // -----^^^^^----- here or $(this).find('.wh4')
  },
  function() {
    $(this).removeClass('col-1hover');
    $('.wh4', this).removeClass('col-1-texhover');
  });

$('.welcomediv').hover(function() {
    $(this).addClass('col-1hover');
    $('.wh4', this).addClass('col-1-texhover');
  },
  function() {
    $(this).removeClass('col-1hover');
    $('.wh4', this).removeClass('col-1-texhover');
  });

.col-1-texhover {
  color: #f7b72f;
}

.col-1hover {
  border: solid 1px #f7b72f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layout">
  <div class="col-1 welcomediv">
    <img src="images/electricalinstallation.png" class=" img-responsive" alt="Image">
    <div class="col-1-text">
      <div class="wh4">
        <h4>My head 1</h4>
      </div>
      <center>
        <hr class="col-1-hr">
      </center>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
    </div>
  </div>
  <div class="col-1 welcomediv">
    <div class="col-1-text">
      <div class="wh4">
        <h4>My head 2</h4>
      </div>
      <center>
        <hr class="col-1-hr">
      </center>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
    </div>
    <img src="images/Transformer_Installation.jpg" class="img-responsive" alt="Image">
  </div>
  <div class="col-1 welcomediv">
    <img src="images/House-Wiring.jpg" class="img-responsive" alt="Image">
    <div class="col-1-text">
      <div class="wh4">
        <h4>My head 3</h4>
      </div>

      <center>
        <hr class="col-1-hr">
      </center>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
    </div>
  </div>
</div>

---

Вы можете сделать то же самое с чистым CSS, также используя :hover селектор .

.welcomediv:hover .wh4 {
  color: #f7b72f;
}

.welcomediv:hover {
  border: 1px solid #f7b72f;
}

.welcomediv:hover .wh4 {
  color: #f7b72f;
}

.welcomediv:hover {
  border: 1px solid #f7b72f;
}

<div class="layout">
  <div class="col-1 welcomediv">
    <img src="images/electricalinstallation.png" class=" img-responsive" alt="Image">
    <div class="col-1-text">
      <div class="wh4">
        <h4>My head 1</h4>
      </div>
      <center>
        <hr class="col-1-hr">
      </center>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
    </div>
  </div>
  <div class="col-1 welcomediv">
    <div class="col-1-text">
      <div class="wh4">
        <h4>My head 2</h4>
      </div>
      <center>
        <hr class="col-1-hr">
      </center>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
    </div>
    <img src="images/Transformer_Installation.jpg" class="img-responsive" alt="Image">
  </div>
  <div class="col-1 welcomediv">
    <img src="images/House-Wiring.jpg" class="img-responsive" alt="Image">
    <div class="col-1-text">
      <div class="wh4">
        <h4>My head 3</h4>
      </div>

      <center>
        <hr class="col-1-hr">
      </center>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
    </div>
  </div>
</div>