首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

如何使用jquery突出显示表中的行

作者：雯颜哥_135 | 2023-09-06 17:07
如何解决《如何使用jquery突出显示表中的行》经验，为你挑选了1个好方法。

我有一个简单的jquery脚本来突出显示悬停时的DOM元素.但是这个脚本无法突出显示我的表格行,细胞没有问题.

在我的脚本中,我需要能够选择任何类型的元素,而不仅仅是表格,因此我无法根据表格选择编写解决方案,例如DataTables.有什么建议？

$(document).ready(function() {
  $("body").on('mouseover', function(event) {
    var highlightTarget = $(event.target);
    highlightTarget.addClass("highlight");

  }).on('mouseout', function(event) {
    $(event.target).removeClass('highlight');
  });
});
.highlight {
  border: 1px solid green;
  background-color: darkseagreen;
  z-index: 99999;
}
.main {
  border-top: 1px solid #9EBACF;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #9EBACF;
  border-right: 1px solid #FFFFFF;
}
.cat {
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #9EBACF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #9EBACF;
}
}



  

    data 1
    data 2
  

  

    data 3
    data 4
  

  

    data 5
    data 6



1> John Bupit..：

使用CSS执行此操作的一种方法是使用:hover选择器.

.hoverable:hover {
    background: rgba(150, 150, 150, 0.5);
}

课程的所有元素.hoverable都将突出显示.需要注意的是在下面的例子中,在徘徊中的第一行,都和突出.在第二行中,仅突出显示,而在第三行中,仅突出显示.

.hoverable:hover {
  background: rgba(180, 180, 180, 0.5);
}

  

    data 1
    data 2
  

  

    data 3
    data 4
  

  

    data 5
    data 6
推荐阅读
devbox
雯颜哥_135
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有