记录一个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又好了（成功！）,原因是提高优先级

css鼠标经过样式记录相关推荐

css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
CSS鼠标悬浮样式全
hover鼠标悬浮的使用和定义用法示例选择鼠标指针浮动在其上的元素,并设置其样式: .box:hover{background-color: red;} 定义和用法 :hover 选择器用于选择 ...
css 鼠标悬浮样式_【技术】CSS设置链接鼠标（失效）不能点样式
css关键代码: <style type="text/css">.add-link{color: #358753;}.link-notallowd{opacity: . ...
css 鼠标离开样式,CSS3 - 鼠标移入移出时改变样式
1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现. 比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可 ...
CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击
鼠标经过变小手 div {cursor:pointer; // 直接给需要改变指针样式的对象添加该属性,不要被误导为 :hover 伪类 } cursor属性及属性值介绍 <!DOCTYPE h ...
css 鼠标提示样式预览表[转]
语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no- ...
前端学习（2847）：css鼠标样式
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
html鼠标手状态,css鼠标样式cursor介绍(鼠标手型)
CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例子:文本或其它页面元素文本或其它页面元素注意把 * 换成如下15个效果的一种: 下面是对这15 ...
html鼠标手状态,css鼠标样式
css鼠标样式 cursor中hand与pointer 例子:CSS鼠标手型效果 CSS鼠标手型效果 pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用. 例子:CSS鼠标手型效果 ...

css鼠标经过样式记录

测试一

测试二

测试三

css鼠标经过样式记录相关推荐

最新文章

热门文章