CSS如何实现把鼠标放在行上整行变色:

在很多网站都有这样的效果，那就是当鼠标放在一个文章列表行的时候，此行就会显示与其他行不同的颜色，本站的文章列表也具有这样的效果，便于浏览者识别，非常人性化，下面就简单介绍一下如何实现此效果。代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>蚂蚁部落</title>

<style type="text/css">

a{text-decoration:none;}

li:hover{background-color:green;}

</style>

</head>

<body>

<ul>

  <li><a href="#">html</a></li>

  <li><a href="#">div+css</a></li>

  <li><a href="#">javascript</a></li>

  <li><a href="#">Jquery</a></li>

</ul>

</body>

</html>

以上代码通过使用E:hover伪类选择器实现了此效果。

但是此中方法有个缺点，就是IE6浏览器不支持除去a元素之外的E:hover伪类选择器。下面介绍一下能够兼容所有浏览器的方法，代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>蚂蚁部落</title>

<style type="text/css">

a{text-decoration:none;}

.over{background-color:green;}

.out{background-color:#FFF;}

</style>

</head>

<body>

<ul>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">html</a>

  </li>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">div+css</a>

  </li>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">javascript</a>

  </li>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">Jquery</a>

  </li>

</ul>

</body>

</html>

使用纯CSS实现在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点：
<html >
<head>
<meta charset="utf-8"/>
<title>change</title>
<style type="text/css">
  tr.change:hover
  {
     margin: 0px !important; padding: 0px 1em !important; outline: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: pre !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;">  }
</style>
</head>
<body>
<h1>鼠标经停变色</h1>
<table width="80%" border="1" align="center">
  <tr class="change">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="change">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

以上所述是小编给大家介绍的HTML中实现鼠标经停时整行（tr）变色，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

CSS如何实现把鼠标放在行上整行变色的更多相关文章

  1. CSS 如何实现当鼠标放在上面时整行变色呢？

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...

  2. 利用jQuery实现鼠标滑过整行变色

    在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实 ...

  3. CSS实现鼠标放图片上显示白色边框+文字描写叙述

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  5. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  6. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  7. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  8. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  9. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

随机推荐

  1. PS批量制作获奖证书并导出PNG

    其实方法和"使用PS批量制作视频字幕"的方法类似.区别在于制作视频字幕时导出成psd格式就可以直接导入Premiere中使用了,而获奖证书考虑到打印设备有无PS的不确定性,可能需要 ...

  2. python-----opencv图像边界扩充

    在对图片进行卷积处理的时候,如果卷积模版(卷积内核)过大,且不对原图的边界进行扩充,会导致处理之后得到的图片尺寸变的很小,也就是严重失真. 而扩充边界有多种方法,本文就介绍一下这些填充方法. 这是原始 ...

  3. export default 和 export 的使用方式

    node中导入模块:var 名称 = require('模块标识符') node中向外暴露成员的形式:module.exports = {} 在ES6中,也通过规范的形式,规定了ES6中如何导入和导出 ...

  4. Selenium常用API的使用java语言之5-selenium元素定位

    1.selenium定位方法 Selenium提供了8种定位方式. id name class name tag name link text partial link text xpath css ...

  5. MySQL 表之间的关系

    表之间的关系 # 定义一张部门员工表 emp id name gander dep_name dep_desc 1 ming male 教学部 教书 2 lilei male 教学部 教书 3 ham ...

  6. Appium自动化测试教程-自学网-monkey日志管理

    日志管理作用 Monkey日志管理是Monkey测试中非常重要的一个环节,通过日志管理分析,可以获取当前测试对象在测试过程中是否会发生异常,以及发生的概率,同时还可以获取对应的错误信息,帮助开发定位和 ...

  7. [USACO]骑马修栅栏 Riding the Fences

    题目链接 题目简述:欧拉回路,字典序最小.没什么好说的. 解题思路:插入边的时候,使用multiset来保证遍历出出答案的字典序最小. 算法模板:for(枚举边) 删边(无向图删两次) 遍历到那个点 ...

  8. How to Fix a Frozen Mac When Updating macOS

    How to Fix a Frozen Mac When Updating macOS By Mike Tee – Posted on Sep 1, 2019 in Mac   While macOS ...

  9. [codevs]线段树练习5

    http://codevs.cn/problem/4927/ #include <iostream> #include <cstdio> #include <algori ...

  10. Codevs 4927 线段树练习5(分块)

    4927 线段树练习5 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 有n个数和5种操作 add a b c:把区间[a,b]内的 ...