纯CSS3代码实现表格奇偶行异色,鼠标悬浮变色

1、首先会用到<tr></tr>元素两个伪类,nth-child()和hover。

然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{}

其次,CSS代码中要注意顺序。

tr:nth-child(odd){
    background-color:#CFF;}
tr:nth-child(even){
    background-color:#699;}
tr:hover{
    background-color:#F0C;}

写成这样是可以正常完成所需要的功能的,但是

如果你写成:

tr:hover{
    background-color:#F0C;}
tr:nth-child(odd){
    background-color:#CFF;}
tr:nth-child(even){
    background-color:#699;}

那么很抱歉,hover的功能是不能实现的。只能实现奇偶行异色,不能实现悬浮变色。

以上两端代码的位移区别就是tr:hover这段代码的位置不一样。

以下是完整的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>表格奇偶行异色</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0px auto;}

            tr:nth-child(odd){
                background-color:#CFF;}
            tr:nth-child(even){
                background-color:#699;}
            tr:hover{
                background-color:#F0C;}

        </style>
    </head>

    <body>
        <table>
            <tr>
                <td>第一行</td>
            </tr>

            <tr>
                <td>第二行</td>
            </tr>

            <tr>
                <td>第三行</td>
            </tr>

            <tr>
                <td>第四行</td>
            </tr>
        </table>
    </body>
</html>

浏览器内运行截图:

这个时候鼠标悬停在第三行。

时间: 2024-10-16 03:19:52

纯CSS3代码实现表格奇偶行异色,鼠标悬浮变色的相关文章

一款简洁的纯css3代码实现的动画导航

之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center" style="background-color: #ee1d27; padding: 20px;"> <div class="contener_link"> <div class=&qu

纯CSS3代码实现简单的图片轮播

以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显示一个照片.2.设置动画:然后使用css3动画,通过对photos进行位移,从而达到显示不同的图片,每次偏移一个图片的宽度,即可显示下一张图片.4张图片,需要切换3次.根据需要可以对各个图片添加相应的序号和图片简介. 3.代码如下: <style> #frame{position:absolute

纯css3代码写九宫格效果

主要用到css3中的transition和布局知识.代码如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name=""> 6 <title>标题</title> 7 </head> 8 <style type="text/

纯css3代码写无缝滚动效果

主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具体代码如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title&

纯css3代码写下拉菜单效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no"> 6 <title>CSS3树形菜单</ti

滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. .toggle input:checked + .ss div { transform: translate3d(60px, 0, 0); background-color: #fff;}

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3

使用纯css3实现图片轮播

<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> <meta charset="utf-8" /> <meta name="description" content="飛天网事,WEB前端开发,纯css3代码图片轮播,HTML5+CSS3精彩案例" /> <meta name=

一款纯css3实现的竖形二级导航的实例教程

之前为大家分享了好多导航菜单.今天给大家带来一款纯css3实现的竖形二级导航.这款导航菜单可以是无限级.一起看下效果图: 实现的代码. html代码: XML/HTML Code复制内容到剪贴板 <div style="width: 700px; margin: auto;"> <div class="W1-h16"> <ul> <li class="has-sub"><a href=&quo