javascript - CSS 无法识别悬停颜色集-6ren

javascript - CSS 无法识别悬停颜色集

转载作者：行者123 更新时间：2023-11-30 11:31:36

我在 javascript 上创建了一个过滤器搜索列表，并将我的列表元素嵌套在 3 个不同的类别下。

北领地昆塔
在职培训
程序手册

在查找这些术语中的任何一个并立即检索它们时，该表非常有用。但是，该列表的目的是增加很多，我希望当鼠标悬停在结果上时，表格显示的颜色与标题上的颜色相似。

问题是这样的:

尽管在 CSS 表中正确定义了 background-color 属性，但将鼠标悬停在任何结果上时我看不到任何颜色显示。

CSS

#myUL li a.1:hover:not(.header) {background-color: #FCF3CF;}

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
	li = ul.getElementsByTagName("li");
	
	for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color:#f6f6f6;
  display: block;
}

#myUL li a.1:hover:not(.header) {
  background-color: #FCF3CF;
}

#myUL li a.2:hover:not(.header) {
  background-color: #D5F5E3;
}

#myUL li a.3:hover:not(.header) {
  background-color: #D6EAF8;
}

#myTable1 {
	background-color: #F9E79F;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.com {
	background-color: #F9E79F;
}

#myTable2 {
	background-color: #76D7C4;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.toj {
	background-color: #76D7C4;
}

#myTable3 {
	background-color: #85C1E9;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable3 th.doc {
	background-color: #85C1E9;
}




p.invisible {visibility:hidden;
			 display:inline;
			 font-size:0.5px;
			 text-align:center;
			 }

<!DOCTYPE html>
<html>

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h2>Matriz de Búsqueda Global</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">


<ul id="myUL">
  
	<table id="myTable1">
	<tr><th class="com">Cuenta NT</th></tr>
	</table>

	  <li class="1"><a href="#">Cuenta NT
	  <p class="invisible">
	  Cuenta NT
	  </p></a></li>


	  
  
	<table id="myTable2">
	<tr><th class="toj">Training on the Job</th></tr>
	</table>

	  <li class="2"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>



  
	<table id="myTable3">
	<tr><th class="doc">Manual de procedimientos</th></tr>
	</table>

	  <li class="3"><a href="#">Manual de procedimientos
	  <p class="invisible">
	  Manual de procedimientos
	  </p></a></li>

</ul>

</body>
</html>

最佳答案

首先，类名不能以数字字符开头，所以我将你的类重命名为.x1、.x2和.x3。其次，在您的第一个悬停规则上使用此选择器 #myUL li.x1 a:hover，并在其他悬停规则上使用类似的选择器，如下所示。

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
	li = ul.getElementsByTagName("li");
	
	for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color:#f6f6f6;
  display: block;
}

#myUL li.x1 a:hover {
  background-color: #FCF3CF;
}

#myUL li.x2 a:hover {
  background-color: #D5F5E3;
}

#myUL li.x3 a:hover {
  background-color: #D6EAF8;
}

#myTable1 {
	background-color: #F9E79F;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.com {
	background-color: #F9E79F;
}

#myTable2 {
	background-color: #76D7C4;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable th.toj {
	background-color: #76D7C4;
}

#myTable3 {
	background-color: #85C1E9;
	border: 1px solid #ddd;
	width:100%;
	height:50px;
	padding-left:10px;
	text-align:left;
	text-transform:uppercase;
}

#myTable3 th.doc {
	background-color: #85C1E9;
}




p.invisible {visibility:hidden;
			 display:inline;
			 font-size:0.5px;
			 text-align:center;
			 }

<!DOCTYPE html>
<html>

<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h2>Matriz de Búsqueda Global</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">


<ul id="myUL">
  
	<table id="myTable1">
	<tr><th class="com">Cuenta NT</th></tr>
	</table>

	  <li class="x1"><a href="#">Cuenta NT
	  <p class="invisible">
	  Cuenta NT
	  </p></a></li>


	  
  
	<table id="myTable2">
	<tr><th class="toj">Training on the Job</th></tr>
	</table>

	  <li class="x2"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>



  
	<table id="myTable3">
	<tr><th class="doc">Manual de procedimientos</th></tr>
	</table>

	  <li class="x3"><a href="#">Manual de procedimientos
	  <p class="invisible">
	  Manual de procedimientos
	  </p></a></li>

</ul>

</body>
</html>

关于javascript - CSS 无法识别悬停颜色集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46044540/

文章推荐： javascript - 限制输入框长度为16

文章推荐： javascript - 这个功能究竟是如何工作的？

文章推荐： javascript - 样式密码填充输入

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - CSS 无法识别悬停颜色集