鼠标移入效果大全

最新推荐文章于 2022-05-09 20:54:13 发布
最新推荐文章于 2022-05-09 20:54:13 发布
阅读量270 收藏 2
点赞数
文章标签： 光标效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/narutozoro111/article/details/103173713
版权 
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>cursor_CSS参考手</title>
    <style>
        .test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;}
        .test td{padding:2px 10px;border:1px solid #ddd;}
        ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191120225847718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hcnV0b3pvcm8xMTE=,size_16,color_FFFFFF,t_70).test td:hover{background:#eee;}
        .auto{cursor:auto;}
        .default{cursor:default;}
        .none{cursor:none;}
        .context-menu{cursor:context-menu;}
        .help{cursor:help;}
        .pointer{cursor:pointer;}
        .progress{cursor:progress;}
        .wait{cursor:wait;}
        .cell{cursor:cell;}
        .crosshair{cursor:crosshair;}
        .text{cursor:text;}
        .vertical-text{cursor:vertical-text;}
        .alias{cursor:alias;}
        .copy{cursor:copy;}
        .move{cursor:move;}
        .no-drop{cursor:no-drop;}
        .not-allowed{cursor:not-allowed;}
        .e-resize{cursor:e-resize;}
        .n-resize{cursor:n-resize;}
        .ne-resize{cursor:ne-resize;}
        .nw-resize{cursor:nw-resize;}
        .s-resize{cursor:s-resize;}
        .se-resize{cursor:se-resize;}
        .sw-resize{cursor:sw-resize;}
        .w-resize{cursor:w-resize;}
        .ew-resize{cursor:ew-resize;}
        .ns-resize{cursor:ns-resize;}
        .nesw-resize{cursor:nesw-resize;}
        .nwse-resize{cursor:nwse-resize;}
        .col-resize{cursor:col-resize;}
        .row-resize{cursor:row-resize;}
        .all-scroll{cursor:all-scroll;}
        .zoom-in{cursor:zoom-in;}
        .zoom-out{cursor:zoom-out;}
        .url{cursor:url(skin/cursor.gif),
        url(skin/cursor.png),
        url(skin/cursor.jpg),
        pointer;}
    </style>
</head>
<body>
<table class="test">
    <caption>cursor光标类型</caption>
    <tbody>
    <tr>
        <td class="auto">auto</td>
        <td class="default">default</td>
        <td class="none">none</td>
        <td class="context-menu">context-menu</td>
        <td class="help">help</td>
        <td class="pointer">pointer</td>
        <td class="progress">progress</td>
    </tr>
    <tr>
        <td class="wait">wait</td>
        <td class="cell">cell</td>
        <td class="crosshair">crosshair</td>
        <td class="text">text</td>
        <td class="vertical-text">vertical-text</td>
        <td class="alias">alias</td>
        <td class="copy">copy</td>
    </tr>
    <tr>
        <td class="move">move</td>
        <td class="no-drop">no-drop</td>
        <td class="not-allowed">not-allowed</td>
        <td class="e-resize">e-resize</td>
        <td class="n-resize">n-resize</td>
        <td class="ne-resize">ne-resize</td>
        <td class="nw-resize">nw-resize</td>
    </tr>
    <tr>
        <td class="s-resize">s-resize</td>
        <td class="se-resize">se-resize</td>
        <td class="sw-resize">sw-resize</td>
        <td class="w-resize">w-resize</td>
        <td class="ew-resize">ew-resize</td>
        <td class="ns-resize">ns-resize</td>
        <td class="nesw-resize">nesw-resize</td>
    </tr>
    <tr>
        <td class="nwse-resize">nwse-resize</td>
        <td class="col-resize">col-resize</td>
        <td class="row-resize">row-resize</td>
        <td class="all-scroll">all-scroll</td>
        <td class="url">url</td>
        <td class="zoom-in">zoom-in</td>
        <td class="zoom-out">zoom-out</td>
    </tr>
    </tbody>
</table>
</body>
</html>

在这里插入图片描述

鼠标移入后就会有效果

narutozoro111
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标移入效果制作
weixin_57762662的博客
10-28 821
打开DW，按下CTPL+N键新建一个HTML文档。 我们先在body标签打上ul标签，再在ul标签打上li标签和a标签，a标签里写一些内容。 在title标签下打一个style标签，然后在style标签里设置背景宽高，字体大小，背景颜色颜色，外右边距和居中。 下图是以上代码效果 接下来我们把li标签里的a标签给去了。 最后我们为li设置一个鼠标移入的样式，我们用（:hover）来设置鼠标移入的样式，我们可以设置自己喜欢的颜色和样式；这里我将li标签的移入效果写为了背
各种鼠标移入效果
11-25
插件描述：各种鼠标移入效果. 参考示例：http://www.jq22.com/jquery-info4782
鼠标点入效果
weixin_69761224的博客
05-09 137
:link 用来表示未访问过的链接 :visited 用来表示访问过的链接 注意：由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色 :hover 鼠标移入的效果 :active 鼠标点击效果 注意： 1:link visited 只对a标签产生效果 hover active 对所有标签都可以产生效果 2:如果要同时设置这四个伪类，那么伪类是有顺序要求的 ...
css实现 10种鼠标移入按钮动效
十二的博客
07-28 2861
html代码 <!DOCTYPE <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>按钮背景动画</title> <meta name="viewport" content="width=device
鼠标进出效果
诸葛苍穹
01-27 424
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} body{font-size: 14px;font-family: "microsoft
鼠标移入移出事件模块
08-21
在IT领域，鼠标移入移出事件是用户交互设计中的基本元素，主要用于增强用户体验和实现特定功能。在本文中，我们将深入探讨“鼠标移入移出事件模块”的系统结构、核心概念以及如何在实际编程中应用这些事件。 一、...
jQuery鼠标移入抖动变形特效
06-24
当鼠标移入`#targetElement`时，启动抖动效果；移出时，停止抖动。代码如下： ```javascript $(document).ready(function() { var $target = $('#targetElement'); var canvas = document.getElementById('canvas...
css鼠标移入翻转效果
10-27
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标移入时的翻转效果。这种效果能够增加用户与页面的互动性，使信息展示更加生动有趣。本文将详细介绍如何利用CSS3...
jquery 鼠标移入显示悬浮框
09-10
通过以上步骤，你就可以在网页上实现一个基本的jQuery鼠标移入显示悬浮框的效果。这个功能可以应用到各种元素上，比如图片、链接、按钮等，为用户提供更直观的反馈信息。在实际开发中，你可能还需要考虑一些高级特性...
移动端页面实现PC端页面鼠标移入效果
weixin_30555515的博客
09-24 652
场景：移动端块点击不友好，用户不能感觉是否已点击 措施：实现像PC端那样移入时有过渡变化效果。但PC端实现的:hover样式在APP端并不适用，APP端用:active能实现一样效果。但是在ios设备上即使设置了:active也没有反应，是因为touchstart未被有效监听，可以在js加一句 document.body.addEventListener('touchstart'...
JS鼠标不同方向进入图片产生不同效果
weixin_41968146的博客
06-07 550
JS鼠标不同方向进入图片产生不同效果
图片特效展示（鼠标移入移除特效）
且听风吟
12-19 2212
太久没动手了，又断续复习一些以前学过的东西。今天我写的是一个图片展示特效。鼠标onmouseover图片的时候，介绍缓慢出现；移除时候介绍回到原位。代码如下：          图片展示特效              *{margin:0;padding: 0;}         #picList{width:1300px;margin:100px auto;}       
wpf样式触发器，鼠标进入阴影效果
weixin_44442366的博客
03-27 856
效果 首先书写Style定义属性应用哪个标签,下面我用的是Border TargetType=“Border” <Border.Style> <Style TargetType="Border"> </Style> </Border.Style> 选择触发方式 按钮鼠标经过 ：Property=“IsMouseOver” <Style.Triggers> <Trigger Property="IsMouseOver" Value="
【技巧】鼠标移入图片各种酷炫效果
zuncle的博客
03-16 1945
先看效果：HTML代码如下：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div id="mainwrap
基础css动画制作鼠标移入效果
夜近天溟的博客
06-09 4072
        这是我的第一篇文章, 算是比较基础的css效果, 如果有什么写的不好的, 希望能让各位大佬给点意见或建议.        这是一个鼠标移入的显示效果, 效果图如下:一.  首先是布局:     我们使用无序列表(当然,一般在ul之外都会套一层div包裹住), 然后里面放图片(使用img标签)和遮罩(使用div标签), 具体如下:接下来是css样式:       首先, 我们直接把全...
《HTML鼠标移入特效》
qq_44894205的博客
10-25 1957
方向与未来 作为一个软件开发工程师应该时刻清楚明白自己的方向，把握好方向未来就是美好的，选择一个一生所要追求的事业做出成绩让其他人去认可你 劳逸结合保持兴趣 过度的学习或许会让你失去自己的思维能力，因此应该合理安排学习与工作与休息，过度的学习后会产生精神疲劳，再去开发项目容易思维混乱缺乏自己的思维能力，所以需要适当去学 ...
按钮鼠标移入效果
TBDBTUO的博客
05-19 486
先设置两个按钮的基本样式 .button{ flex: 0 0 40%; margin: 10px; height: 60px; display: flex; justify-content: center; align-items: center; border: 1px solid #48a6b1; ...
js 鼠标移入文字放大效果
最新发布
05-19
你可以使用CSS中的`transform`属性来实现鼠标移入文字放大效果，具体步骤如下： 1. 首先选中需要添加动画效果的文字元素。 2. 在CSS中为该元素设置`transition`属性，以便动画效果能够平滑地进行。 3. 然后为该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值