一个DOM元素纯CSS实现hover开关

最新推荐文章于 2022-11-28 18:41:28 发布
最新推荐文章于 2022-11-28 18:41:28 发布
阅读量701 收藏
点赞数 1
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Huuc6/article/details/124493014
版权
本文介绍如何仅使用一个DOM元素和CSS来创建一个hover开关效果，该开关在悬停时激活，滑块为正方形，且尺寸可自定义。内容强调了开关的动画过渡效果，滑块移位及背景色变化，同时开关宽度动态适应父元素宽度，始终保持大于高度。
摘要由CSDN通过智能技术生成

用CSS实现一个开关样式，hover时触发，滑块为正方形，具体大小可随意，如下图

在这里插入图片描述

尽量实现如下要求，可实现一部分：

  1. 开关动作均有动画过度（滑块移位、背景色）
  2. 只用一个dom元素实现
  3. 开关的高度是固定的，但宽度不固定，即宽度为未知父元素的100%，宽度始终大于高度

HTML

	<div class="father">
	  <div class
最低0.47元/天 解锁文章
ZiuC
关注
专栏目录
JavaScript的DOM之鼠标悬浮事件
m0_50481455的博客
04-21 1万+
JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理： 就是当鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬浮事件onmouseover()和onmouseout()事件</tit
用 jquery 或原生 js 添加 hover 属性
君非道的博客
10-18 5693
用 jquery 给 dom 元素添加 hover // html 代码 <div class="test">请把鼠标放在上面</div> /* * js 代码 * hover 函数接收两个参数，这两个参数也是函数 * 第一个参数是鼠标悬浮时触发，第二个参数是鼠标离开时触发 */ $('.test').hover(function() { // 鼠标悬浮时触发 $('.test').css('color', 'blue') }, function() { // 鼠标离开时触发
jq用on给动态添加的dom节点绑定hover事件
jiandan1127的博客
04-01 3338
1. 测试用 hover 是不行的, 语法不支持 $(selector).on(event,childSelector,data,function,map)　 2. 使用下面的方法可以实现同样的效果 $('#table .th-inner').on({ mouseenter: function (e) { console.log(1) }, ...
CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
aa124413278的博客
04-01 532
　　最近学习html5和一些UI框架，接触css比较多，就来跟大家分享一下css中的一些调试技巧。之前做页面，css都是自己写的，所以要改哪里可以很快的找到，现在使用了UI框架，里面的样式是不可能读完的，所以就要通过调试来找到要修改的地方。 　　在调试CSS的时候，我们一般使用Chrome、Firefox、IE等浏览器自带的工具，快捷键都为F12.但是，我们要调试如hover的样式时，...
javascript(使用DOM操作CSS，其他样式操作的属性，事件）
m0_62520946的博客
07-16 768
目录使用DOM操作CSS获取元素当前样式其他样式操作的属性事件对象练习1.通过JS修改元素的样式语法：元素.style.样式名=样式值注意：如果css的样式名含有-，这种名称在js中时不合法的比如background-color需要将这种样式修改为驼峰命名法方法：去掉-，然后将-后的字母大写 2.读取元素的样式语法：元素.style.样式名通过style属性设置和读取的都是内联样式，无法读取样式表中的样式 获取元素当前样式 1.IE浏览器currentStyle语法：元素.currentStyle
纯CSS3实现的开关按钮动画特效源码.zip
10-31
2. **过渡（Transitions）**：过渡效果允许我们平滑地改变一个元素的样式属性，比如宽度、颜色或者透明度。通过指定`transition`属性，我们可以定义何时开始、持续多久以及如何变化这些属性。在开关按钮中，这可以...
纯CSS3实现发光按钮开关切换特效.zip
07-04
在本资源中，我们关注的是一个使用纯CSS3实现的发光按钮开关切换特效。这个特效设计得非常生动，模拟了一个类似电灯开关的交互效果，用户可以通过点击使开关在两个状态之间切换。同时，开关上的文字还伴随着独特的...
JS+CSS3实现的开关控制节能灯泡动画效果源码.zip
11-19
在本资源中，"JS+CSS3实现的开关控制节能灯泡动画效果源码.zip" 是一个包含使用JavaScript（JS）和CSS3技术创建的互动开关控制节能灯泡动画效果的代码示例。这个项目主要展示了如何利用这两种前端技术来构建动态、...
CSS制作 开关按钮（按下去、弹起来）.zip
01-06
"jQuery插件库-收集最全最新最好的jQuery插件.url"则提示我们，虽然这个项目主要使用CSS，但可能也涉及到了jQuery，一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在某些情况下，可能使用...
dom执行click事件后，hover失效问题
SUZEHUI9636的博客
08-08 635
dom执行click事件后，hover失效问题
调试DOM元素hover,focus,actived的样式--谷歌浏览器调试器
LuckySummer*
03-10 2353
平时写页面代码，给DOM添加一些css样式时，我们可以用谷歌浏览器的开发者工具进行调试。如下图这样： 出现的效果是这样的： 相应的按F12打开Chrome的开发者工具，可以看到相应的样式： 那么关键的问题来了，我想看：hover样式哪里去了？接下来找到并点击这个按钮： 选中：hover，你就能看见你所写的：hover样式了： 相
js实现hover样式，适用于只需要为单个元素添加少量样式的情况
郑伟斌的博客
08-26 3513
1.简介 在网页开发中一个元素的鼠标悬停样式常常由伪类:hover来控制，而当我们用js生成一个DOM元素时想要给它添加hover样式的话就显得比较麻烦，常规方法是先给它添加一个类名，然后往页面中新增一个style便签，标签内定义伪类hover的样式。 2.代码实现 这里采用mousenter和mouseleave的监听来实现hover样式。代码如下: var dc = { //设置元素的hov...
使用DOM操作(不使用css的:hover的方法)实现鼠标移入表格 当前行的背景颜色改变...
a496798779的博客
04-25 306
1 <body> 2 <ul id="list"> 3 <li>11</li> 4 <li></li> 5 <li></li> 6 <li></li> 7 <li></li> ...
chrome控制台调试hover后才出现的元素
猛一回头的博客
05-25 4567
1、按【F12】打开开发者工具，鼠标位于悬停才出现的元素上时，点击右键； 2、不要选中任何选项，将鼠标移动到开发者工具的调试面板 3、按下N键，定位成功
Javascript----HTML DOM 事件
iteye_6125的博客
06-18 516
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ [b]注：DOM： 指明使用的 DOM 属性级别。[/b] [b]1.鼠标事件[/b] 属性 描述 DOM [u]onclick ...
DOM学习
sunako099的博客
11-19 376
DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 文档的接口，使文档操作变得非常优雅、简便。DOM 最大的特点就是将 HTML 文档表示为 “节点树”。
CSS的简单学习（6）
wqksoul的博客
11-28 407
实训
js 关于如何动态设置css的hover样式最佳方式，设置hover样式
PrimaryColor
11-16 5648
网上很多方式都是采用js监听dom的鼠标移入（onmouseover）移出（onmouseout）事件，进行控制这个dom的hover样式。消耗性能先不说，代码也很庞大，再加上如果是自定义主题（修改后能立马看到效果的，不是需要刷新）的功能可能就更麻烦了，要给所有的dom都绑定这样的事件。
只能使用一个dom元素,且不借助任何js能力的前提下,纯css实现一个类似如下图的效果
最新发布
09-16
在只能使用一个DOM元素且不借助任何JS能力的前提下，可以通过纯CSS实现一个类似图形的效果。 首先，创建一个div元素，并给它添加一个class名，例如"class-name"。然后，在CSS中定义这个class名的样式。 ``` <div class="class-name"></div> ``` CSS样式部分： ``` .class-name { width: 200px; height: 200px; background-color: red; position: relative; } .class-name:after { content: ""; position: absolute; left: 100px; top: 0; width: 0; height: 0; border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid blue; transform-origin: left center; transform: rotate(45deg); } .class-name:before { content: ""; position: absolute; right: 100px; top: 0; width: 0; height: 0; border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid blue; transform-origin: right center; transform: rotate(45deg); } ``` 在上述CSS中，通过对class名的设置，实现了一个红色的正方形，并使用了伪元素:before和:after来创建了两个三角形，通过调整其位置和旋转角度，使其看起来像一个正方形内嵌着两个三角形。 这样就实现了只使用一个DOM元素且不借助任何JS能力的前提下，纯CSS实现类似图形的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值