【CSS实现hover动态效果】

来源：互联网发布：高德地图js api文档编辑：程序博客网时间：2024/05/03 17:37

【CSS实现hover动态效果】

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">    </head>    <style type="text/css">        .wrap {            width: 500px;            height: 500px;            margin: 0 auto;            border: 1px solid blue;        }        .con {            width: 80%;            height: 100px;            margin: 40px auto;            border: 1px solid black;        }        /*必须在父级hover，兼容：IE6+*/        .one:hover p {            color: red;        }        /*标签内要加data-title属性，兼容：IE9+*/        .two:hover::before {            content: attr(data-title);/*取到data-title属性的值*/            color: green;        }        .three:hover::after {            content: attr(data-title);/*取到data-title属性的值*/            color: blue;        }    </style>    <body>        <div class="wrap">            <div class="con one">                <span>鼠标移进来</span>                <p>颜色会变哦</p>            </div>            <div class="con two" data-title="看我七十二变">                <span>鼠标移进来</span>                <p>文字会变哦</p>            </div>            <div class="con three" data-title="看我七十二变">                <span>鼠标移进来</span>                <p>文字会变哦</p>            </div>        </div>    </body></html>

阅读全文

1 0