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. 前端笔记-bom

    BOM对象 BOM即浏览器对象模型,它与dom不同的是可以操作浏览器窗口,使用它的接口我们可以改变窗口,状态栏,文本,及其他与除页面以外其他动作,使得js可以和我们浏览器进行沟通 窗口 即window ...

  2. js for/in循环及其它

    for in 循环不仅可以遍历对象的属性,还可以遍历数组. Js 中为数组提供了多种遍历方式 const ary = ['a', 'b', 'c']; // 最基本的方式, 只能遍历下标有序递增的数组 ...

  3. c++ 智能指针的使用

    https://www.cnblogs.com/TenosDoIt/p/3456704.html #include <QCoreApplication> #include <stri ...

  4. 01_Request和Response

    参考文档 http://www.iamnancy.top/djangorestframework/Responses/ https://q1mi.github.io/Django-REST-frame ...

  5. 30、[源码]-AOP原理-注册AnnotationAwareAspectJAutoProxyCreavi

    30.[源码]-AOP原理-注册AnnotationAwareAspectJAutoProxyCreavi

  6. LeetCode 273. Integer to English Words

    原题链接在这里:https://leetcode.com/problems/integer-to-english-words/description/ 题目: Convert a non-negati ...

  7. PHP 对参数签名

    对参数进行签名防止参数劫持 加入timestamp, 防止DOS攻击(但这次没有实现这个功能,后续再实现) interface BaseToken { /** * @param params arra ...

  8. Javascript基础——函数

    一 函数的介绍 1.概念:由一堆代码按照一定的规则,组成实现了某个功能,通过函数自身或事件调用 函数的特点: 忽略细节:只关注其实现的功能,不关注内部构造: 重复使用:函数可以实现代码的重复利用: 选 ...

  9. linux 中将用户添加到组的 4 个方法

    Linux 组是用于管理 Linux 中用户帐户的组织单位.对于 Linux 系统中的每一个用户和组,它都有惟一的数字标识号.它被称为 用户 ID(UID)和组 ID(GID).组的主要目的是为组的成 ...

  10. 将Eclipse,MyEclipse等编辑器的项目管理框颜色改为护眼豆沙绿的方法

    转载链接:https://blog.csdn.net/caibaoH/article/details/77005977