css鼠标经过样式记录

最新推荐文章于 2024-07-11 10:08:53 发布

EHCB

最新推荐文章于 2024-07-11 10:08:53 发布

阅读量4.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_30000313/article/details/80291079

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录一个css鼠标进过hover属性

页面的jsp代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="haha.css" />
<title>标题title</title>
</head>
<body>
	<div class="sTable">
	<table border="0" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<td>标题一</td>
				<td>标题二</td>
				<td>标题三</td>
			</tr>
		</thead>
		<tbody class="tb">
			<tr>
				<td class="td1">1-1</td>
				<td calss="td2">1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td class=td1">2-1</td>
				<td calss="td2">2-2</td>
				<td>2-3</td>
			</tr>
		</tbody>
	</table>
	</div>
    </body>
</html>

测试一

增加鼠标经过效果，增加下面jsp里面的代码：

<script>
	$(".td1").each(function(){
		 $(this).css("background","#22dd00");
	});
	$(".tb").find("tr").hover(function(){
		$(this).css("background","#ff6600");
	})
</script>

发现结果竟然是鼠标经过之后td已经有背景色的没有改变，其他虽然有改变，但是改变完之后，鼠标移走之后背景色竟然没有改变回来（失败！）

如果把hover设置放置在css文件中，则效果是，td背景色依旧没有改变效果，不过其他的可以恢复颜色

测试二

然后就把背景色设置和hover设置都放在css里面进行测试

haha.css样式如下：

.td1{
	background:#22dd00
}
.tb tr:hover{
	background:#ff6600
}

设置单元格背景色和鼠标经过该行时的颜色，结果当鼠标经过的时候，发现一行中已经设置颜色的单元格没有变，其他改变了，效果如图：（失败！）

后来网上查了一下，说可以在css加上下面的语句，效果如下：（成功！）

.tb tr:hover td{
	background:none
}

测试三

但是上面的效果是标题一下面的td同时设置好背景色的，如果想在js里面根据条件判断是否需要设置背景色，如下：

jsp代码增加下面：

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
	$(".td1").each(function(){
		if($(this).html() == "1-1"){
		  $(this).css("background","#22dd00");
		}
	}); 
</script>

css注释后：

/* .td1{
	background:#22dd00
} */
.tb tr:hover{
	background:#ff6600
}
.tb tr:hover td{
	background:none
}

发现之前写好的效果又不见了，具体原因不清楚，不知道是不是因为在css加载和在js里面加载样式的优先级不一样（失败！）

然后就在css里面加上!important又好了（成功！）,原因是提高优先级

EHCB

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css鼠标经过样式记录

记录一个css鼠标进过hover属性页面的jsp代码如下：&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/
复制链接

扫一扫

专栏目录