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. Go语言实现简单的TCP、UDP链接

    ⼀.使用Golang创建⼀一个TCP连接   1.服务端处理理流程 a.监听端口   b.接受客户端的链接 c.创建Goroutine,处理这个链接(⼀个服务端要链接多个客户端,所以使用Gorouti ...

  2. Helix QAC — 软件静态测试工具

    Helix QAC 是Perforce 公司(原PRQA 公司)产品,主要用于C/C++ 代码的完全自动化静态分析工作,可以提供编码规则检查.代码质量度量.软件结构分析.测试结果管理等功能.Helix ...

  3. linux网络编程之进程间通信介绍

    从今天起,开始学习进程间通信相关的东东,关于socket的编程先告一段落了,在学习进程间通信之前,首先先要了解一些概念,所以,这次不开始真正的代码编写,先纯理论,理解了为之后的更深入的学习可以打下良好 ...

  4. JDBC课程4--使用PreparedStatement进行增删查改--封装进JDBCTools的功能中;模拟SQL注入 ; sql的date()传入参数值格式!

    主要内容: /*SQL 的date()需要传入参数值: preparedStatement().setDate(new java.util.Date().getTime()); 熟悉了使用Prepar ...

  5. Linq 中 Join 的用法

    Linq中连接主要有组连接.内连接.左外连接.交叉连接四种.各个用法如下. 注:本文内容主要来自<Linq实战>,本例中用到的对象请见文章底部. 1. 组连接 组连接是与分组查询是一样的. ...

  6. H5s播放rtsp和rtmp视频

    最近接触的几个项目都有对接视频的功能,目前国内视频厂商以海康和大华为主,其对应的视频流格式也不一致,导致对接起来很麻烦.有幸在客户那接触到一种新的视频对接解决方案,支持Html5标准.废话不多少,看一 ...

  7. THINKPHP SQL注入处理方式

    //注入的产生一般都是对用户输入的参数未做任何处理直接对条件和语句进行拼装. //不安全的写法举例1 $_GET['id']=8;//希望得到的是正整数 $data=M('Member')->w ...

  8. Java8实战，

    Supplier 1, @FunctionalInterfacepublic interface Supplier<T> { 2,    T get(); 3, Supplier<A ...

  9. 008——转载——c#获取当前日期时间

    (一)转载——c#获取当前日期时间 我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日 ...

  10. mysql删除完全重复数据保留一条

    CREATE TABLE tmp AS (SELECT DISTINCT * FROM oa_organization);--将不重复的数据存入新建临时表tmp DELETE FROM oa_orga ...