果图

各位长友，大家好！

今天给大家带来的源码是 13款鼠标划过特效CSS3样式源码！

大家可以自己搭配修改，应用到自己的项目中！

• 有想要文件版源码的朋友 可以来我的HTML5学习交流：581549454 里面都是做前端开发的，拒绝卖课和广告！纯学习交流，每天会上传一些优秀的作品和源码，欢迎初学者和大神们。

废话不多说，上源码！

CSS：

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'codropsicons';

src:url('../fonts/codropsicons/codropsicons.eot');

src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),

url('../fonts/codropsicons/codropsicons.woff') format('woff'),

url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),

url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

}

css链接

链接可以使用任何css属性(例如,color,font-family,background等)来设置样式.

另外,链接的样式可以不同,具体取决于所处的状态.以下伪选择器可用:

a:link 定义正常的为访问链接的样式

a:visited 定义访问链接的样式

a:active 一旦点击链接,链接就会激活

a:hover 当鼠标悬停时,链接的样式

下面的例子,创建一个链接,当鼠标移动到它上面的时候会改变样式

html代码:

<p><a href="https://www.sougou.com" target="_blank">搜狗</a></p>

css代码:

a:hover{ color:red; }

执行结果如下:

这是鼠标移动到链接上时,显示的样式

当为链接设置样式时,必须遵守以下规则:

a:hover 必须在a:link和a:visited之后

a:active 必须在a:hover之后

默认情况下,文本链接由浏览器加下划线.

处理带链接的文本,css最常见的用法之一是删除下划线.在下面的示例中,text-decoration属性用于删除下划线.

html代码:

<p><a class="text-decoration" href="https:www.sougou.com">我的下划线已经被删除了!</a></p>

css代码:

a.text-decoration:link{text-decoration:none;}

效果如下:

以下属性用于控制链接的样式:

border:none 从包含链接的图像中删除边框

outline:none 删除IE中点击链接行上的虚线边框

二 css自定义鼠标光标样式

css允许你将鼠标悬停在元素上时,设置所需的光标样式.例如,你可以将光标更改为手形图标,帮助图标等.而不是默认的指针.

在下面的例子中,当我们将鼠标移动到span元素上时,鼠标指针被设置为一个帮助图标.(cursor就是光标的意思)

<span style="cursor:help;">需要帮忙么?</span>

效果如下:

cursor属性还有许多其他的值.例如:

default:默认光标

crosshair:光标显示为十字准线

pointer:光标显示为手形图标

cursor的值比较多,用图片显示给大家:

通常改变鼠标光标的外观,是为了提高网站访问者的体验.但是,选择错误的光标风格也可能会引起误解.

果你想让你的网站看起来更酷炫，可以改变鼠标样式，用你喜欢的图片来代替。

下面就来介绍下步骤方法：

首页把鼠标图标格式转换成.ico格式，大小为32*32

转换格式网址为：https://www.easyicon.net/covert/

然后在CSS样式中增加代码：

*{
 cursor:url(../images/shubiao.ico),auto;
}

大功告成啦~~~

说明：

• 图片大小最好是32*32的大小
• Css中的cursor属性不仅仅需要将url（）书写正确，还需要填写一个备用样式。 cursor:url('图片地址'),备用选项;。 缺一不可。

欢迎大家多多留言讨论，如有错误请大神指教，如果你是小白也可以私信“资料”领取前端学习资料一起学习