hover伪类的使用-CSS入门基础（015）

最新推荐文章于 2024-11-18 14:56:18 发布

虾米大王

最新推荐文章于 2024-11-18 14:56:18 发布

阅读量2.1k

点赞数 1

分类专栏： CSS 文章标签： html5 html css css3

本文链接：https://blog.csdn.net/modern358/article/details/111397711

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们接着分享关于超链接样式的内容。

上节我们知道了“a：hover”可以定义鼠标悬停超链接a时的样式。很多初学者都认为hover只限于a标签使用，如果你这样理解，就埋没了css一个功能强大的技巧了。“：hover”伪类是可以定义任何一个元素的鼠标悬停时的样式的。

语法：

元素：hover {属性：属性值；}

元素可以是任意的块元素和行内元素。

示例代码：

<html>  <head>    <title>hover伪类</title>    <style type="text/css">      div      {        width:200px;        height:80px;        border:1px solid black;      }      div:hover { background-color:green;}            span       {              }      span:hover { background-color:green;}            p      {        border:1px solid black;      }      p:hover { background-color:green;}    </style>  </head>  <body>    <div>块元素</div>    <span>行内元素</span>    <p>段落</p>  </body></html>

鼠标样式：

在css中，有两种定义方式，一是浏览器鼠标样式，二是自定义鼠标样式。

语法：

cursor:属性值；

鼠标样式cursor的属性值
属性值	说明
default	默认值，白色箭头
pointer	手
text	文本光标
crosshair	十字架
wait	等待
help	箭头带问号
move	带方向的十字架箭头
e-resize	左右扩展箭头
ne-resize	右上左下扩展箭头
nw-resize	左上右下扩展箭头
n-resize	上下扩展箭头
se-resize	左上右下扩展箭头
sw-resize	左下右上扩展箭头
s-resize	上下扩展箭头
w-resize	左右扩展箭头

虽然我们看到cursor属性取值很多，但是在实际开发中，通常用到的也就是default和pointer两个属性值。

示例代码：

<html>  <head>    <title>鼠标样式</title>    <style type="text/css">    div    {      width:200px;      height:50px;      margin-bottom:20px;      border:1px solid black;      text-align:center;      background-color:green;    }    #d1 { cursor:default;}    #d2 { cursor:pointer;}    #d3 { cursor:text;}    #d4 { cursor:crosshair;}    #d5 { cursor:wait;}    #d6 { cursor:help;}    #d7 { cursor:move;}    </style>  </head>  <body>    <div id="d1">default</div>    <div id="d2">pointer</div>    <div id="d3">text</div>    <div id="d4">crosshair</div>    <div id="d5">wait</div>    <div id="d6">help</div>    <div id="d7">move</div>  </body></html>

自定义鼠标样式：

语法：

cursor:url("路径地址"),属性；

示例代码：

<html>  <head>    <title>自定义鼠标样式</title>    <style>      div       {        width:200px;        height:80px;        border:1px solid black;      }      #d1 { cursor:url("images/deault.cur"),default}      #d2 { cursor:url("images/pointer.cur"),pointer}    </style>  </head>  <body>    <div id="d1">default</div>    <div id="d2">pointer</div>  </body></html>