html鼠标经过改变样式,css如何实现鼠标经过样式改变

2024-04-04 06:41:43

实现方法：1、使用“:hover”伪类选择器，选择鼠标指针浮动在其上的元素，并为其设置其样式，语法“:hover{属性名:属性值}”；2、使用transtion属性，语法“transtion:css属性名称过度时间;”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

1、使用伪类实现样式切换伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。

.slickButton {

color: white;

font-weight: bold;

padding: 10px;

border: solid 1px black;

background: lightgreen;

cursor: pointer;

}

.slickButton:hover {

color: black;

background: yellow;

}

盼望着，盼望着

效果：

2、使用CSS3的过渡功能实现颜色过渡直接使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能，就可以从一组样式平滑的切换到另一组样式。下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。

.slickButton {

color: white;

font-weight: bold;

padding: 10px;

border: solid 1px black;

background: lightgreen;

cursor: pointer;

transition: background 0.5s, color 0.5s;

-webkit-transition: background 0.5s, color 0.5s;

}

.slickButton:hover {

color: black;

background: yellow;

}

盼望着，盼望着

效果：

html鼠标经过改变样式,css如何实现鼠标经过样式改变相关推荐

html里range怎么改样式,CSS之修改input range样式
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 今天来探讨一下 HTML5 的 range 这个新的 input 类型,不过重点不是在 range 要如何使用,而是在如 ...
html里range怎么改样式,CSS之修改input range样式 [ lion1ou ]
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 今天来探讨一下 HTML5 的 range 这个新的 input 类型,不过重点不是在 range 要如何使用,而是在如 ...
css中设置鼠标形状的函数,css怎样设置鼠标的形状
css怎样设置鼠标的形状发布时间:2020-11-13 10:10:40 来源:亿速云阅读:91 作者:小新小编给大家分享一下css怎样设置鼠标的形状,相信大部分人都还不怎么了解,因此分享这篇文 ...
html input文本框样式,css设置input文本框样式代码实例_html/css_WEB-ITnose
css设置input文本框样式代码实例: 使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如 ...
html input文本框样式,css 定义input文本输入框样式
摘要腾兴网为您分享:css 定义input文本输入框样式,找乐助手,长江e号,一点英语,天天爱等软件知识,以及多功能盒子,方寸天地,斗音,蚊声,奶牛牧场,聚好商城,滞纳金计算器,反p2p终结者,lo ...
如何设置鼠标移开后css,如何设置鼠标离开时由hover设置的样式不变？
1.用js添加延时处理 #div1{ height: 100px; width: 100px; background: #000000; position: relative; } #div2{ he ...
wordpress字体样式——css炫酷的字体样式实现
demo1:css实现颜色变化效果如图所示实现代码如下 <!DOCTYPE html> <html lang="en"> <head>< ...
html overflow 样式,css修改overflow滚动条默认样式
html代码这是内容111 这里是内容222 这里是内容333 css代码 .inner{ width: 265px; height: 400px; position: absolute; top: ...
ul li列表样式css,列表ul li 专用样式
列表ul li 专用样式 DATE: 2016-11-10 / VIEWS: 1142 主页级别的页面大部分的内容都是做在无序列表里面的,其庞大的使用规模,需要有完备的样式支持. ul{zoom:1} ...
php修改table样式,CSS怎么设置table边框样式
今天和大家说一下CSS如何设置table表格边框样式,对table设置CSS样式边框分为4种情况,以下分别详细讲解这四种情况需要怎么处理. 1.只对table设置边框 2.对td设置边框 3.对tab ...

最新文章

热门文章