【CSS实现hover动态效果】

<!DOCTYPE html>
<html>
    <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>
        <p>
            <p class="con one">
                <span>鼠标移进来</span>
                <p>颜色会变哦</p>
            </p>
            <p class="con two" data-title="看我七十二变">
                <span>鼠标移进来</span>
                <p>文字会变哦</p>
            </p>
            <p class="con three" data-title="看我七十二变">
                <span>鼠标移进来</span>
                <p>文字会变哦</p>
            </p>
        </p>
    </body>
</html>

以上是CSS如何实现hover动态效果的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

CSS小技巧：利用transition保留hover状态Sep 27, 2022 pm 02:01 PM

如何保留 hover 的状态？下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法，希望对大家有所帮助！

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

体验即飞携手哈浮X1相机的飞行之旅Jan 15, 2024 pm 02:21 PM

我们经常能够在网上看到很多精彩的俯视视角的视频，无人机拍出来的画面确实相当震撼，但其实很多人对无人机的认知很有限，例如有些地方限飞为什么还能飞？其实即开即飞的“无人机”才是当前的主流，更值得大多数人选择，今天就给大家带来哈浮飞行相机X1的上手体验。外观方面，哈浮飞行相机X1，首创折叠设计，整机仅125g，比手机轻，折叠后可以轻松手握，放进包包毫无压力。四个软性染叶和安全边框设计，完美保护拍摄安全。染叶创新采用Biobased生物基材，高弹耐用，安全环保;更有全保护边框加持，起飞降落都能贴心保护手

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

怎么移除css的hover事件Feb 01, 2023 am 10:06 AM

移除css hover事件的方法：1、；通过“$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })”方法绑定hover事件；2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。