`
橄榄绿
  • 浏览: 277290 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS控制鼠标

CSS 
阅读更多
一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。 

用css控制的语法如下:
<span style="cursor:*">文本或其它页面元素</span> 
把 * 换成如下15个效果的一种:
hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。 

下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!
hand是手型
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-size是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
分享到:
评论

相关推荐

    纯css控制内容随滚动条滚动,可放任意位置

    标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...

    css 控制鼠标显示样式示例

    &lt;title&gt;CSS控制鼠标显示样式示例 .hand { cursor: hand; } .crosshair { cursor: crosshair; } .text { cursor: text; } .wait { cursor: wait; } .default { cursor: default; } .help { cursor:...

    CSS3鼠标经过图片3D翻转动画特效.zip

    CSS3的选择器增强了我们对元素的选择和控制能力,例如:`:hover`选择器用于指定元素在鼠标悬停时的样式。同时,CSS3的盒模型(Box Model)允许我们精确控制元素的边距、填充和边界,这对于实现翻转动画的位置调整至...

    CSS或者JS实现鼠标悬停显示另一元素

    想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现。 js: 写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a")....

    117个图片css3鼠标经过效果

    可以利用CSS3的`display`属性来控制隐藏层的可见性。默认情况下,隐藏层设置为`display: none`,鼠标悬停时变为`display: block`,展示链接或其他信息: ```css .hidden-layer { display: none; } .image:...

    CSS3鼠标经过导航菜单动画效果代码

    CSS3的鼠标经过效果通常通过`:hover`伪类来触发,当鼠标悬停在特定元素上时,应用相应的样式或动画。 1. **前后旋转效果**: 这种效果可以通过改变元素的`transform`属性实现。`transform`允许我们对元素进行旋转...

    CSS3鼠标滑过3D立体翻转特效.zip

    本资源“CSS3鼠标滑过3D立体翻转特效.zip”正是利用了这些特性,为用户提供了一种独特的视觉体验。当鼠标滑过元素时,该元素会呈现出3D立体翻转的效果,仿佛一个方向感知的三维立方体在屏幕上动态变换。 首先,让...

    纯CSS3鼠标经过按钮背景填充动画特效

    在本案例中,我们关注的是“纯CSS3鼠标经过按钮背景填充动画特效”,这是一种利用CSS3特性和过渡效果来实现的一种交互式设计。这种特效可以提升用户体验,使用户在与按钮交互时感受到动态的视觉反馈。 首先,让我们...

    js和CSS3鼠标悬停超链接展示图片特效

    本教程将介绍如何利用JavaScript和CSS3技术在鼠标悬停超链接时展示图片特效,为用户提供更为丰富的视觉体验。这款特效包含10种不同的动画效果,使得超链接在被鼠标指针悬停时更加生动有趣。 首先,我们讨论CSS3在...

    css3鼠标滑过特效

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是鼠标滑过特效。本知识点将详细讲解如何使用CSS3来创建鼠标滑过的图片散开特效,以及结合jQuery库实现更复杂的交互。 ...

    css竖型鼠标触发伸缩菜单

    "CSS竖型鼠标触发伸缩菜单"是一个实现这种效果的技术,它允许用户通过悬停鼠标来展开或收起菜单项,通常用于导航栏,使得网站的层级结构更加清晰且易于操作。接下来,我们将深入探讨这个主题,了解其工作原理、实现...

    CSS3鼠标悬停动画下拉导航菜单代码

    本示例中,我们将深入探讨"CSS3鼠标悬停动画下拉导航菜单代码"的实现及其相关知识点。 首先,我们要理解CSS3选择器和伪类。在实现这个动画效果时,我们主要会用到`:hover`伪类,它用于在鼠标指针悬停在元素上时应用...

    117个css3鼠标经过效果.zip

    在这个例子中,`.box`元素在默认状态下有淡灰色背景,当鼠标悬停时,背景色会平滑过渡到粉红色,`transition`属性控制了这个变化的速度和方式。 除此之外,CSS3还提供了许多其他特性来创造丰富的鼠标悬停效果,如...

    CSS3鼠标Hover按钮动画特效.zip

    同时,JavaScript还可以与CSS3结合,通过改变CSS类名来控制动画的启动和停止。 总的来说,"CSS3鼠标Hover按钮动画特效.zip"是一个包含利用Flex布局和CSS Transition实现的动态按钮效果的资源包。开发者可以学习并...

    纯CSS3鼠标滑过图片文字动画特效

    1. CSS3选择器:为了精确控制元素的样式,CSS3引入了更强大的选择器,如类选择器、ID选择器、伪类选择器(如`:hover`,用于检测鼠标悬停状态)和属性选择器等,使得我们可以针对不同情况应用不同的样式。 2. CSS3...

    15款css3鼠标悬停图片动画过渡特效

    【标题】"15款css3鼠标悬停图片动画过渡特效"揭示了这是一组利用CSS3技术实现的,当鼠标指针悬停在图片上时,能够产生各种动态过渡效果的设计实例。这些效果旨在提升用户体验,增加网页的互动性和视觉吸引力。 ...

    css3鼠标悬停图片内部放大和阴影特效

    【CSS3库】中的"css3鼠标悬停图片内部放大和阴影特效"是一种常见的网页交互设计,用于提升用户体验。这个特效结合了CSS3的多种特性,包括:transform、transition、box-shadow以及伪类选择器等,实现了图片在鼠标...

    完全CSS的鼠标悬停tip效果

    在探讨“完全CSS的鼠标悬停tip效果”这一主题时,我们主要关注的是如何利用CSS技术来实现当鼠标悬停在特定元素上时显示提示信息(即tooltip)的效果。这种效果广泛应用于网页设计中,旨在增强用户体验,提供额外的...

    CSS3鼠标悬停链接文字下划线动画特效

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是鼠标悬停时的动态效果。本主题聚焦于"CSS3鼠标悬停链接文字下划线动画特效",它能为网站的导航菜单增加独特的视觉吸引...

Global site tag (gtag.js) - Google Analytics