如何在同一 div 中使用 jquery hover 和 html 标签

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

您需要获取悬停元素中的元素，您可以使用 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>