CSS鼠标悬浮及其样式

这篇具有很好参考价值的文章主要介绍了CSS鼠标悬浮及其样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

hover鼠标悬浮的使用和定义用法

示例

选择鼠标指针浮动在其上的元素,并设置其样式:

 .box:hover{
      background-color: red;
  }

定义和用法
:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示:hover 选择器可用于所有元素
:link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。

 注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

鼠标悬浮样式

这里我们要用cursor属性

 cursor 属性规定要显示的光标的类型(形状)。

1、default 默认光标(通常是一个箭头)

2、auto 默认。浏览器设置的光标。

3、crosshair光标呈现为十字线。

4、pointer 光标呈现为指示链接的指针(-只手)

5、move 此光标指示某对象可被移动。

6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。

7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。

8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。

9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。

10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。

11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。

12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。

13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。

14、text 此光标指示文本。

15、wait 此光标指示程序正忙(通常是一只表或沙漏)。

16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。

案例

 

  :hover{
      cursor: crosshair;
      /*光标成十字线*/
  }

参考:

CSS鼠标悬浮及其样式_巧克力很苦的小博客-CSDN博客_css鼠标悬停样式文章来源地址https://www.toymoban.com/news/detail-498907.html

到了这里,关于CSS鼠标悬浮及其样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 审查元素时,hover等伪元素,只会在鼠标悬停在对应元素上时生效。一旦鼠标移开,样式就会消失,已解决

    最近遇到个小小的问题 当el-input 设置cleable属性的时候,鼠标移入输入框内,会有个清除的图标 输入框的内容居右显示,导致清除的图标和内容重叠了 通过控制台查看元素,只有在鼠标悬停在对应元素上时生效。一旦鼠标移开,样式就会消失 即使我把右侧的这些都选上了也

    2024年04月16日
    浏览(33)
  • css文本超长显示省略号,鼠标hover省略号展示全部内容

    有时候我们会发现鼠标hover到文字省略号上,会展示出全部内容,效果如下: 首先,文字过长展示省略号 再借助鼠标悬停标签展示其 title 内容的特性,为标签加上 title属性,实现我们想要的效果 有关 title 属性的介绍:

    2024年02月11日
    浏览(57)
  • 10个实用的CSS样式之悬浮卡片

    👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟 🏡个人主页:starry陆离 📚订阅专栏:『10个实用的CSS样式』 对于初学前端的小白来说css样式的设计很考验基本功和创意想法,而在项目开发中我们不可能将大部分的时间用于CSS代码的编写,能复用的就复用。因此我特意

    2024年02月08日
    浏览(35)
  • CSS鼠标悬浮图片模糊切换效果

    当我们想设置在鼠标移入前,图片是半透明(模糊)的,在我们鼠标移入后,图片就变得清晰,这里我们可以设置css的伪类:hover来实现: 首先我们在body中写一个div模块,这个div包裹了两个部分,一个部分就是我们要用的img,第二部分就是文字,文字部分也用一个div包裹。

    2024年02月10日
    浏览(63)
  • 纯css实现鼠标悬浮、点击更改元素背景

    css伪类 active:元素被点击时变色,点击后颜色消失 focus:元素被点击后变色,点击后颜色不消失 hover:鼠标悬浮时变色,移除后颜色消失 template部分代码 style部分代码

    2024年02月16日
    浏览(47)
  • 【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框

    往期回顾: 【QT入门】 Qt自定义控件与样式设计之qss选择器-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客 鼠标悬浮弹出对话框的功能:最终要实现纯代码设计出一个音量按钮,当鼠标悬浮

    2024年04月23日
    浏览(41)
  • CSS设置鼠标样式和添加视频样式

    CSS用户界面样式 轮廓线outline 使图片和文字对齐 vertical-align: baseline | top | middle | bottom baseline 默认元素设置在父元素的基线上 top把元素的顶端与行中最高元素的顶端对齐 middle把元素放置父元素的中部 bottom把元素的顶端与行中最低的元素的顶端对齐 这个用法限于行内和行内块

    2024年02月07日
    浏览(39)
  • CSS 改变鼠标样式(大全)

    使用方法:

    2024年02月03日
    浏览(47)
  • CSS自定义鼠标样式

    CSS自定义鼠标样式 属性值 属性 描述 url 需使用的自定义光标的 URL default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标 crosshair 光标呈现为十字线 pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动 e-resize 此光标指示矩形框的边缘可被向

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包