css中设置鼠标悬停

在CSS中,我们可以通过:hover选择器来设置鼠标悬停时的样式。

    p:hover {
        /* 鼠标悬停时的样式 */
        color: red;
        background-color: yellow;
    }

css中设置鼠标悬停

上述代码表示当鼠标悬停在p元素上时,改变文字的颜色为红色,背景色为黄色。

除了针对文本元素设置鼠标悬停样式外, 我们还可以为其他元素设置鼠标悬停样式,如:

    /* 改变图片的透明度 */
    img:hover {
        opacity: 0.8;
    }
    /* 改变按钮的颜色 */
    button:hover {
        background-color: green;
        color: white;
    }

上述代码分别表示当鼠标悬停在图片和按钮上时,改变图片的透明度为0.8,改变按钮的背景色为绿色,字体颜色为白色。

鼠标悬停可以为网站添加一些互动性和动感,但过度使用会导致页面复杂,影响用户体验。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效