CSS中cursor样式大全,设置禁止(不可点击)样式光标类型

CSS 中可以使用 cursor 属性来设置鼠标悬停在元素上时要显示的光标类型。若要设置禁止(不可点击)样式,可以将 cursor 属性设置为 not-allowed,实现方式如下:

.element {
  cursor: not-allowed;
}

上述代码中,.element 表示需要应用禁止样式的元素。

当鼠标悬停在该元素上时,光标将会变成一个圆形禁止图标,表示该元素无法进行交互操作。

cursor 属性定义当鼠标指针移动到元素上时显示的光标类型。这个属性可以应用于所有 HTML 元素。

下面是 cursor 属性的取值及其对应的光标类型:

  • auto:使用浏览器默认光标。
  • default:默认光标,通常是一个箭头。
  • none:没有光标,通常需要 JavaScript 配合使用。
  • context-menu:上下文菜单光标,通常是一个垂直的箭头和一个小框。
  • help:帮助光标,通常是一个问号或类似图标。
  • pointer:手形光标,通常表示链接可以被点击。
  • progress:进度光标,通常是一个圆圈或旋转图标。
  • wait:等待光标,通常是一个沙漏或旋转图标。
  • cell:单元格光标,通常是一个十字形等分标志。
  • crosshair:准星光标,通常是一个十字形。
  • text:文本光标,通常是一个竖线( | )。
  • vertical-text:竖排文本光标,通常是一个水平线( — )。
  • alias:别名光标,通常是一个矢量图形。
  • copy:复制光标,通常是一个矢量图形。
  • move:移动光标,通常是带有四个箭头的十字形。
  • no-drop:不可拖动光标,通常是一个圆圈和一条斜线。
  • not-allowed:不允许光标,通常是一个圆圈和一个斜杠( / )。
  • all-scroll:所有方向滚动光标,通常是带有四个箭头的十字形。
  • col-resize:水平拉伸光标,通常是一个双箭头。
  • row-resize:垂直拉伸光标,通常是一个双箭头。
  • n-resize:向上调整大小光标,通常是一个双箭头。
  • e-resize:向右调整大小光标,通常是一个双箭头。
  • s-resize:向下调整大小光标,通常是一个双箭头。
  • w-resize:向左调整大小光标,通常是一个双箭头。
  • ne-resize:向右上调整大小光标,通常是一个双箭头。
  • nw-resize:向左上调整大小光标,通常是一个双箭头。
  • se-resize:向右下调整大小光标,通常是一个双箭头。
  • sw-resize:向左下调整大小光标,通常是一个双箭头。
  • ew-resize:水平调整大小光标,通常是一个双箭头。
  • ns-resize:垂直调整大小光标,通常是一个双箭头。
  • nesw-resize:向右上和左下调整大小光标,通常是一个双箭头。
  • nwse-resize:向左上和右下调整大小光标,通常是一个双箭头。
  • zoom-in:放大光标,通常是一个加号。
  • zoom-out:缩小光标,通常是一个减号。

使用方式:

.element {
  cursor: pointer;
}

上述代码中,.element 表示需要应用指定样式的元素,pointer 表示需要显示的光标类型,这里为手形光标。

cursor 属性只影响当前元素,不影响其内部的子元素。如果要改变子元素的光标,必须对每个子元素应用 cursor 属性。

例如,以下代码将在鼠标悬停在 .parent 元素及其所有后代元素上时显示 “帮助” 光标:

.parent, .parent * {
  cursor: help;
}

用Vue构建RSS查看器

Vue 是一个流行的前端框架,可以用来构建动态和交互性较强的单页面应用程序。下面是一个使用 Vue 构建 RSS 查看器的大致步骤:创建 Vue 应用程序首先,您需要创建一个基于 Vue 的应用程序。您可以使用 Vue-cli,脚手架工具来快速生成一个空的 Vue 应用程序。npm install -g @vue/clivue create my-rss-readercd my-rss-readernpm run serve执行完上述命令后,你应该可以通过 http://localhost:8080 访问到一个空的 Vue 应用程序。获取 RSS 数据在 Vue 中,通常使用 Axios 或 ...

日期:2023-04-10 15:28:33 浏览:848

css常用的媒体响应样式怎么写

常用的响应式样式主要是通过媒体查询 @media 实现的。通过 @media 可以判断当前设备的 Viewport 大小,并根据不同的大小设置不同的样式。下面是一个简单的响应式样式示例,实现了在不同设备上显示不同颜色的效果:/* 默认样式 */.my-class { color: red;}/* 平板设备样式 */@media screen and (max-width: 1024px) { .my-class { color: green; }}/* 手机设备样式 */@media screen and (max-width: 768px) { .my-class { c...

日期:2023-04-09 19:37:20 浏览:317

Google material icons如何使用

Material icons 是一套互联网开放的图标集合,由 Google 设计师团队“Google Material Design Team”开发,集成了多种常见的图标,例如文件、摄像头、音乐、搜索、保存等等。Material icons 是一个优秀的图标库,可以兼容多种应用程序和网站,并且可以随时使用和修改。以下是如何使用 Material icons 的步骤:从 Google 官方网站 https://material.io/resources/icons/ 下载 Material icons 文件。您可以下载 SVG、PNG、Webfont 或者是最新的 Material icons ...

日期:2023-04-09 19:38:44 浏览:322

css怎么调整横向滚动条的高度

在大多数情况下,浏览器会根据它的默认样式表渲染一个横向滚动条。它的样式通常是由操作系统或浏览器样式指定的,但你也可以使用 CSS 来调整横向滚动条的高度,以下是两种常用的方式:使用 ::-webkit-scrollbar 伪元素选择器来设置滚动条的高度(适用于 WebKit 浏览器,例如 Chrome、Safari):/* 横向滚动条整体样式 */::-webkit-scrollbar { height: 8px; /* 高度 */}/* 滑轨样式 */::-webkit-scrollbar-track { background-color: #f1f1f1; /* 背景颜色 */}/* ...

日期:2023-04-10 22:58:20 浏览:253

css鼠标移入图片放大效果

以下是一个简单的CSS鼠标移入图片放大效果的示例:<div class="image-container"> <img src="example.jpg" alt="Example Image"></div>.image-container { position: relative; width: 300px; height: 200px; overflow: hidden;}.image-contai...

日期:2023-04-19 23:29:45 浏览:630

CSS中cursor样式大全,设置禁止(不可点击)样式光标类型

CSS 中可以使用 cursor 属性来设置鼠标悬停在元素上时要显示的光标类型。若要设置禁止(不可点击)样式,可以将 cursor 属性设置为 not-allowed,实现方式如下:.element { cursor: not-allowed;}上述代码中,.element 表示需要应用禁止样式的元素。当鼠标悬停在该元素上时,光标将会变成一个圆形禁止图标,表示该元素无法进行交互操作。cursor 属性定义当鼠标指针移动到元素上时显示的光标类型。这个属性可以应用于所有 HTML 元素。下面是 cursor ...

日期:2023-05-18 14:38:32 浏览:1521

CSS 中修改 input 元素中的占位符placeholder文本颜色

在 HTML 中,一个表单元素(如 input 或 textarea)的占位符是指在用户未输入内容时显示出来的灰色文本。在 CSS 中,可以通过 ::placeholder 伪元素来样式化占位符文本。下面是一个简单的例子,将 input 元素中的占位符文本颜色修改为红色:input::placeholder { color: red;}上述代码中,input::placeholder 表示选中 input 元素中的占位符文本,color: red 则表示将其颜色修改为红色。如果想要修改占位符文本的字体大小...

日期:2023-05-18 15:14:13 浏览:787

CSS Grid 布局 grid-column代码讲解

grid-column 是 CSS Grid 布局中用来定义子元素的列位置的属性。下面是一个简单的代码示例:<div class="grid-container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</...

日期:2023-05-19 17:11:41 浏览:537

css如何设置字间距

在CSS中,我们可以使用 letter-spacing 属性来设置字间距,该属性用于控制元素中每个字符之间的距离。具体使用方法如下所示:/* 将段落中的字间距设置为1像素 */p { letter-spacing: 1px;}在上面的代码中,我们将 letter-spacing 设置为 1px,这会在一个字符和另一个字符之间添加1像素的空格。除了像素值之外,letter-spacing 也可以使用其他单位,如em(相对于父元素的字体大小),rem(相对于根元素的字体大小)等。需要注意的是,letter-s...

日期:2023-06-16 17:09:58 浏览:808

css文本超出显示3个点

要实现CSS文本超出显示三个点(ellipsis),可以使用CSS的文本溢出(text-overflow)属性结合其他属性来实现。具体步骤如下:设置元素的宽度和高度,并设置overflow: hidden属性,以确保文本超出部分被隐藏。设置元素的white-space属性为nowrap,以防止文本换行。使用text-overflow属性将溢出的文本部分替换为省略号。可以使用text-overflo...

日期:2023-09-11 17:34:36 浏览:783