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. scikit-learn中的机器学习算法封装——kNN

    接前面 https://www.cnblogs.com/Liuyt-61/p/11738399.html 回过头来看这张图,什么是机器学习?就是将训练数据集喂给机器学习算法,在上面kNN算法中就是将特 ...

  2. MOOC下载器的文档整理

    1.背景   最近学习中国大学MOOC的课程,想把课程的pdf下载下来本地保存并浏览.工具: Setup-Mooc-3.4.0.exe   但是,却发现所下载的文档在不同的文件夹里,浏览很不方便.于是 ...

  3. 【转】java注解处理器——在编译期修改语法树

    https://blog.csdn.net/a_zhenzhen/article/details/86065063 前言从需求说起由于相关政策,最近公司安全部要求各系统在rpc接口调用的交互过程中把相 ...

  4. 稀疏矩阵在Python中的表示方法

    对于一个矩阵而言,若数值为零的元素远远多于非零元素的个数,且非零元素分布没有规律时,这样的矩阵被称作稀疏矩阵:与之相反,若非零元素数目占据绝大多数时,这样的矩阵被称作稠密矩阵. 稀疏矩阵在工程应用中经 ...

  5. LINUX 新手 入门 教程

    新手入门教程 点评: linux 入门 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声

  6. python-selenium安装笔记

    python-selenium操作火狐,谷歌,360,ie 亲测可用,windows环境 python3.6 由于python2到2020年不进行维护所有都用python3 selenium pip ...

  7. Java锁--Semaphore

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3534050.html Semaphore简介 Semaphore是一个计数信号量,它的本质是一个&quo ...

  8. Selenium常用API的使用java语言之13-多表单切换

    在 Web 应用中经常会遇到 frame/iframe 表单嵌套页面的应用, WebDriver 只能在一个页面上对元素识别与 定位, 对于 frame/iframe 表单内嵌页面上的元素无法直接定位 ...

  9. Vue获取后端数据 渲染页面后跳转

    主页面 <template> <div> <ul v-for="item in courseList"> <router-link :to ...

  10. nginx动静分离配置

    动静分离: 所谓动静分离指的是当访问静态资源时,路由到一台静态资源服务器,当访问是非静态资源时,路由到另外一台服务器 静态资源配置: 如配置如下location 表示url为  /static/*.x ...