CSS 联合伪类target实现click

最新推荐文章于 2024-08-15 03:45:43 发布
最新推荐文章于 2024-08-15 03:45:43 发布
阅读量865 收藏
点赞数 1
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eoo772/article/details/48975277
版权
本文介绍了如何利用CSS3的transform、transition和animate属性来实现类似iOS dock栏的交互效果。在探索过程中，作者发现可以使用CSS的联合伪类target来模拟JavaScript中的点击事件，从而达到元素点击后的动态效果。这是一个关于CSS技巧的分享。
摘要由CSDN通过智能技术生成

今儿无聊看了看css3的transform和transition和animate，想着实现ios的dock栏 ，于是就瞎乱写了一些，最后实现点击按钮弹跳抖动的时候有新发现，反正于我get一个新技能，分享之。


css样式联合伪类target实现js中的点击事件：粗鲁依旧，看例子

<ul>
    <li id="email"><a href="#email">e-mail</a></li>
    <li id="phone"><a href=
最低0.47元/天 解锁文章
eoo772
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS-进阶之元素：focus伪类模拟点击事件】
banglianqian3400的博客
04-30 2348
先放上我们最终实现的效果 注：这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时，显示一个tip浮动框。 html: <div class="wrapper"> <span class="click-ele">我是按钮</span> <div class="popup">我是文字测试君</...
css-click:css 伪类
07-12
css-click css 伪类 :click
伪元素添加点击事件
ju__ju的博客
10-24 736
前端伪元素加点击事件,触发点击事件
CSS：好玩的‘伪类’系列之——(:target)
gavincz的博客
04-29 1327
:target 定义：指一个唯一的页面元素(目标元素)，其id与当前URL片段匹配。一般结合锚点链接使用 触发条件：当当前页面存在被指定的目标元素时，可修改目标元素的样式 兼容：IE8及8以下不支持、Opera9.5以下不支持 举个栗子 html代码： <div style='width:50%;margin:0 auto'> <h3>目录<...
给伪元素加点击事件jquery
最新发布
weixin_40225325的博客
08-15 48
给伪元素加点击事件：探索 jQuery 的奥秘 在前端开发中，伪元素是用来为某些元素添加样式的一种方式，例如 ::before 和 ::after。它们通常用于装饰或布局。但在实际应用中，伪元素的事件处理却是一个难题，因为它们并不是 DOM 树的一部分。因此，给伪元素绑定点击事件并不会像我们预期的那样简单。本文将探讨如何在...
jQuery 添加/移除CSS类实现代码
10-29
在实际应用中，通常会在CSS文件中预先定义好各种样式类，然后通过jQuery监听事件（如点击、鼠标悬浮等）来改变元素的CSS类，从而实现动态效果。例如，当用户点击一个按钮时，可以改变某个元素的样式： ```...
纯CSS实现图片点击放大带关闭按钮的图片特效代码
01-23
如果仅限于CSS，可以通过伪类`:target`来模拟关闭功能，但这种方案在实际应用中可能会有一些限制。 总结一下，纯CSS实现图片点击放大带关闭按钮的图片特效主要涉及到以下知识点： 1. CSS布局：使用相对定位和绝对...
html+css+js 实现拍照预览上传图片功能
12-09
document.querySelector('.btn').addEventListener('click', function() { const formData = new FormData(document.getElementById('mainForm')); // 压缩并添加到formData compressImage(document....
jquery CSS3实现手机滑屏tab菜单效果
11-20
本文将深入探讨如何使用jQuery和CSS3来实现手机上的滑屏Tab菜单效果，让用户的导航操作变得更加简单直观。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务。在实现滑屏Tab...
CSS伪类 :target 的应用样例
bury_的博客
02-28 345
test 2/29上博客
CSS伪类添加事件
bs521521的博客
08-26 688
给伪类添加事件
前端 伪类元素如何添加点击事件
Kerwin__li的博客
02-20 3375
当我给盒子添加 点击事件的时候 他会事件冒泡到父元素上，所以 给父元素点击事件，那么红色的方块也会触发事件。这样就可以达到 让伪元素添加事件的效果了。思考：如何让 红色方块点击后会有事件？也可以避免组件冗余，添加类名即可。
css中为伪元素增加点击事件和hover
qq_51218646的博客
01-15 4738
鼠标悬停在父元素上面时为伪类元素增加样式 <!-- html结构 --> <div class="father"></div> <style> .father::after { content: 'after'; } .father:hover::after { color: pink; } </style> 伪元
css3中伪类选择器:target的使用
Hey firefly
04-04 9916
参考资料　CSS3 target伪类简介今天由于在做任务13，里面有一个子任务是要求用css写出一个简单的图片轮播，刚开始真的是完全没有思路，想着不用js怎么绑定点击事件呢，看了别人的一些实现方法，发现:target是一个神奇的东西。如果想看用css3实现的图片轮播，狠狠点击这里demo刚开始接触:target时，真的是一头雾水，觉得这个是个什么东西，怎么能处理点击事件呢。看了差不多五六篇博客还有简
:target 伪类使用技巧
PT - Blog
10-11 551
:target 伪类使用技巧
关于CSS伪类特性和CLICK等事件的冲突解决方案
qq_27905183的博客
12-06 4643
在下面这种情况：... <a href="#" id="link">点击我</a> <style> #link:hover{ color: rgb(253,248,0); } </style>这段代码简单的设置了一个链接的hover鼠标悬停伪类样式，但是如果我们加入下面这段代码的话:<script> window.onload = function() {
CSS的三个伪类
灵动笔记——上学的小二郎
11-08 407
<br />a:link {color: #FF0000}          /* 未访问的链接 */<br />a:visited {color: #00FF00}     /* 已访问的链接 */<br />a:hover {color: #FF00FF}     /* 鼠标移动到链接上 */<br />a:active {color: #0000FF}     /* 选定的链接 */<br /><br />提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后
伪类target实现纯css模态框
weixin_30938149的博客
06-03 93
今天看到一个纯css模态框，觉得是很牛呀 看了下用了target伪类， 一直不知道有这么神奇的伪类 。。 用法是这样的，给模态框一个id， <div id="pop" class="overlay"> 然后通过锚链接的方法 <a class="button" href="#pop">Click!</a> 点击...
css伪类focus-within
07-28
:focus-within是一个CSS伪类，用于选择器匹配其内部有焦点的元素的父元素。当父元素的子元素获得焦点时，可以使用:focus-within来样式化父元素本身。\[2\]在引用\[1\]中的示例中，当.field类的div的后代元素input被focus时，div的背景颜色会变为#f0f0f0，而伪类::after中的*将不会显示。\[1\]而在引用\[2\]中的示例中，当.my-element类的div的子元素获得焦点时，div本身会出现一个3px的红色边框。\[2\]\[3\]所以:focus-within可以用来样式化父元素，当其内部的子元素获得焦点时。 #### 引用[.reference_title] - *1* [CSS之:focus-within自身或某个后代focus的伪类](https://blog.csdn.net/joyce_lcy/article/details/104481277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [CSS里：focus-within 的作用和用法](https://blog.csdn.net/i042416/article/details/109618129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值