简体   繁体   English

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

[英]How to use jquery hover for a div and an html tag inside the same div

I am new to jquery, I have been trying to use the.hover event but i got this issues and i have not found my way around it.我是 jquery 的新手,我一直在尝试使用.hover 事件,但我遇到了这个问题,我还没有找到解决方法。 what i want to do is when i hove a div i want to add a border-color to that div which i have been able to do and at the same time i will also like to have the h4 tag to change color while the image to have a change like an opacity on the image with some text.我想要做的是,当我放置一个 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 code jquery代码

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

CSS code CSS代码

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

i will really like your help Thanks in advance我真的很喜欢你的帮助提前谢谢

You need to get the element within the hovered element, either you can specify context with jQuery or use find() method.您需要获取悬停元素中的元素,您可以使用 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>


You can do the same thing with pure CSS as well using :hover selector . 你可以用纯 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM