搜索
搜索

如何在同一div中将jQuery悬停用于div和html标签

stickz_me 发表于 Dev
25
stickz_me

我是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;
 }

我真的很喜欢你的帮助

Pranav C Balan

您需要使元素位于悬停的元素内，您可以使用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>

您也可以使用 :hover选择器 对纯CSS执行相同的操作 。 

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在单个按键事件中将 HTML 标签插入到同一个 <div> 标签中？（在 JQuery 或 Javascript 中）

如何在同一行上对齐div输入标签和按钮

如何在同一行中显示标签和htmltextbox用于mvc和按钮的html helper控制

如何在 JQuery 中打开和关闭同一个 div

在jQuery中的同一div上的鼠标悬停时隐藏和显示吗？

如何在同一 div 的不同元素上添加悬停效果

如何在一个父DIV中将三个DIVS与其他HTML标签居中

jQuery单击和悬停不适用于div

如何在标签内启用按钮或 div 悬停检测？

jQuery-如何在同一函数中添加单击和悬停

如何在 CSS 的同一行上对齐包含文本的 div 和包含图像的 div？

如何在innerHTML中将获取数据设置为img和div标签

jQuery如何在div中选择标签？

如何在 HTML 中使用 div 标签

如何将div和标签保持在同一行？

如何在Angular 6中将HTML标签或元素附加到div？

CSS标签和div在同一行

如何在html中将文本框和按钮保持在同一行

如何在CSS中将标签与div的“底部”对齐？

如何在 DIV 标签中将值传递给 CLASS？

如何在 HTML 的同一行上输入和标签？

如何在悬停时使div覆盖div？

如何在另一个div中每隔X个div添加关闭和打开div标签？

如何在单击时激活粗体标签，并在HTML / javascript / jquery中再次单击时停用

如何在html的section标签内包含div标签

当HTML和CSS位于同一编辑器页面中时，如何在鼠标悬停时放大图像

如何在不使用jquery的情况下仅将函数应用于仅一个特定div或类中的a标签

如何将两个 h3 标签和一个 div 放在同一行？

如何在同一背景div的左侧放置图片和菜单？（含图片）

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档