从零开始前端学习[22]:cursor鼠标悬浮效果和opacity透明度效果

最新推荐文章于 2022-11-06 21:00:18 发布
最新推荐文章于 2022-11-06 21:00:18 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： # 1.从零开始挑战前端 文章标签： cursor opacity 透明度属性 鼠标悬浮属性
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_29924041/article/details/78080680
版权

cursor鼠标悬浮效果和opacity透明度效果

  • cursor鼠标悬浮效果
  • opacity透明度的效果

提示：
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

cursor鼠标悬浮效果

我们知道a标签是有一个默认鼠标悬浮上去就有一个小手指这样的一个效果，但是，如果不是a标签的时候呢？怎么在其他标签元素上面同样去添加这样的一个鼠标悬浮的效果呢？？
这个时候就需要用到cursor属性了

cursor的使用:
cursor:pointer;//显示小手指的形式

常用cursor的属性值

cursor属性值 属性值的含义
pointer 小手指的效果
help 帮助的效果
move 可移动的效果
text 文本选中的效果
wait 等待的效果

代码比较:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .f_l{float: left}
        .f_r{float: right}
        .clearfix:after{
          content: "";
          clear: both;
          display: block;
        }
    .main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 deeppink}
    .main div{width: 200px;height: 200px;background: blue;line-height: 200px;text-align: center;margin-left: 10px}
    .main .box1{cursor: pointer}
    .main .box2{cursor: wait}
    .main .box3{cursor: move}
    .main .box4{cursor: text}
    .main .box5{cursor: help}
  </style>
</head>
<body>
  <div class="main clearfix">
    <div class="box1 f_l">pointer</div>
    <div class="box2 f_l">wait</div>
    <div class="box3 f_l">move</div>
    <div class="box4 f_l">text</div>
    <div class="box5 f_l">help</div>
  </div>
</body>
</html>

显示效果如下：

这里写图片描述

opacity透明度的效果

之前我们提过使用rgba来作为背景图片的透明度转换，但是在css中，有一个专门的属性，叫opacity属性来作为透明度效果的展示问题

在新版本兼容上可以直接使用opacity:0.5;来表示透明度50%
但是在老版本的浏览器上，并不是兼容，所以为了保持兼容性问题，
需要使用filter:alpha(opacity:50) //取值范围为0-100;

对上述的案例box5进行修改一下

    .main .box5{cursor: help;opacity: 0.5;filter:alpha(opacity: 50); }

可以看到的是:

这里写图片描述

box5的颜色变透明了

欢迎访问博客

^_^ 小小码nong
关注
专栏目录
JavaScript动画效果 opacity 透明度变化
YOUAFR的博客
10-19 3503
#box { width: 200px; height: 200px; background: red; opacity:0.2; /*这是解决透明度在IE上的兼容问题*/ filter:alpha(opacity=20); } window.onload = function() { va
前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）
最新发布
uu0216的博客
07-11 2311
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
利用css属性：hover 和opacity实现简单的动画效果
leo_0629的博客
08-17 4826
HTML代码：  &lt;div class="col-md-3 col-sm-4 box"&gt; &lt;a href="team2.html"&gt; &lt;div class="img"&gt; &lt;img src="img/cyd.jpg&
CSS cursor 和 opacity 属性
weixin_34242331的博客
06-27 109
cursor ：一些不同的光标，当设置该属性之后，鼠标指上去会随着属性而改变。 举例： &lt;span style="cursor:crosshair"&gt;十字线&lt;/span&gt;&lt;br&gt; &lt;span style="cursor:default"&gt;默认的&lt;/span&gt;&lt;br&gt; &lt;span styl
图像透明度 - Hover 效果
06-01 332
 实例 2 - 请把鼠标指针移动到图像上： CSS 是这样的： img { opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */ } 第一个 CSS 代码块类似实
HtmlCss光标(插入符caret)透明隐藏光标 221106笔记
kfepiza的博客
11-06 1101
没有设置 caret-color插入符光标红色 caret-color:red。文字插入符光标透明
web前端开发学习总结，8个优秀的CSS实践
m0_60305422的博客
07-22 296
基础能力 HTML(5)篇 1. html 基本结构 html 标签是由<>包围的关键词。 html 标签通常成对出现，分为标签开头和标签结尾。 有部分标签是没有结束标签的，为单标签，单标签必须使用 / 结尾。 页面所有的内容，都在 html 标签中。 html 标签分为三部分：标签名称，标签内容，标签属性。 html 标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页 结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内 容。 标签的内容是在一对标签内部的内
从零开始的linux_manjaro+vim+fish shell+i3酷炫操作和配置（持续更新中......）
numb_ac的博客
11-12 3164
这里写目录标题一、前言二、安装虚拟机三、安装vim，fish和oh-my-fish四、配置喜欢的fish样式五、用FileZilla给虚拟机里的linux传文件 一、前言 笔者此前几乎没有vim使用经验，也没有安装过linux虚拟机，偶然在b站上看到TheCW的视频，遂惊异于linux和vim配合的巧妙与vim配置和fish shell等结合的惊艳。决定从零开始对其进行研究，并将学习路线和遇到的障碍及解决方式记录下来。 二、安装虚拟机 安装VMware16 官网安装较慢，我是在网上某个软件园用下载器下载
web前端动画专题（3）：撩人的按钮特效
大前端
08-04 1296
特效一览 滑箱： 果冻： 脉冲： 闪光： 气泡： 滑箱特效 效果图 原理 因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。 为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。 代码实现 html： <button>xin-t...
前端 学习笔记 【持更】
lemossrkilakila
02-06 247
文本换行 段首缩进 垂直对齐 列表样式 HSLA 背景图片固定 鼠标效果 点击元素高亮 svg 大小写 文字两端对齐 省略 定位 flex布局 html DTD object-fit 禁止选择文字 禁止拖动新建窗口 transition-timing-function
CSS hover的一些小问题
weixin_44554027的博客
01-20 500
CSS3 hover的一些小问题 （作者：郭海明，撰写时间：2019年1月19日） 1、 hover移入下划线 首先我们先在HTML里面用一个类，包裹一个span标签 然后在里面设置想要显示的文字 然后给文字设置样式颜色、大小、字体粗细等。 然后给它设置一个伪类(hvoer) 让鼠标移动到文字的时候，文字会有一个颜色的改变，并且文字下面会显示下划线,利用文字下边的内边距，让文字和下划线上下...
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
opacity(透明度)属性设置
weixin_30347335的博客
12-04 1423
1、opacity:是属性，整个元素包含子元素全部都会透明，取值范围0-1; 2、background-color：rgba（0,0,0，.5）rgba是值，用于背景，取值范围0-1。 补充：a-alpha=透明度通道 实例： 1 div{ 2 width: 200px; 3 height: 200px; 4 border: 1px solid red; 5 backg...
CSS opacity设置不透明度
weixin_34319374的博客
02-12 189
　　1.opacity设置不透明度 　　　　opacity会将含有这个属性的子类都变成具有opacity属性，可以改变元素、元素内容、字标签的不透明度。而rgba只会改变设置的那个背景颜色的透明度效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&gt...
CSS Opacity属性对层叠上下文的影响
陈春春的技术博客
02-20 2704
今天在遇到一个opacity过渡的时候，遇到了一个奇怪的问题： 父元素设置了opacity。 子元素设置了z-index:-1 <div class="box" style="opacity:.7"> <img style="position:relative;z-index:-1" src="http://www.gbtags.com/gb/laitu/2
css设置hover时改变盒子背景图片的透明度，但不改变盒子文字的透明度
WanweI897的博客
01-24 2342
之前看到别人有用after伪元素来给图片添加透明度的写法，没有与hover相关联，于是我重新写了一下。用这种方法我们就可以用一张图片实现两种状态，减少资源的请求。 <style> div{ position: relative; width: 100px; height: 25px; cursor: pointer; } div::after { position: absolute; content
透明色Opacity属性的使用
qq_54108380的博客
09-14 3600
Opacity属性： 值 描述 value 指定不透明度。从0.0（完全透明）到1.0（完全不透明） inherit Opacity属性的值应该从父元素继承 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> i
如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊
babulongbo的博客
09-01 2547
我这里主要使用Javascript实现的。 这个效果大体是这样的，当我们的鼠标悬浮在按钮上，背景的半透明变得更浅或更深，鼠标移开后就回复原样。所以我们要用到两个鼠标事件onmouseover和onmouseout。 onmouseover鼠标悬浮事件，onmouseout鼠标移开事件，很显然当我们的鼠标移入和移出时我们都要修改背景的opacity属性，那么我们可以在一个函数中对背景opacity
jQuery动画效果：不透明度与隐藏显示操作
"本章节主要介绍了jQuery中的动画效果，包括不透明效果的fadeTo()方法，隐藏元素的hide()方法，显示元素的show()方法，交替显示隐藏元素的toggle()方法，以及向上收缩效果的slideUp()方法和向下展开效果的slideDown...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值