【CSS-进阶之元素：focus伪类模拟点击事件】

hosition 发布于2019-04-23 14:35 / 1145人阅读

摘要：并且模拟的是事件并不是点击事件，因为当我们鼠标按钮放开后弹框立即消失了。当按钮被点击时，触发了事件。事件往上传播到父元素。因此触发了它的伪类效果。进而能控制其下面的子元素属性。

先放上我们最终实现的效果

注：这里建议插入codepen(临时使用图片代替)

我们想要实现当点击某个元素时，显示一个tip浮动框。

html:


    我是按钮
    我是文字测试君

通常我们会采用JS的方法给触发事件元素监听click事件监听，然后手动显示隐藏。

这里我们用CSS来模拟hover事件：

:active + 兄弟选择器(加号+)

首先想到的是使用伪类的方法:active，他和相邻兄弟选择器(加好+)一起使用。


    我是按钮
    我是文字测试君

.popup{
    display:none;
}
.click-ele:active + div.popup{
    display: block;
}

这种方法更适用于事件触发和相应事件元素属于兄弟元素的场景。并且模拟的是hover事件并不是点击事件，因为当我们鼠标按钮放开后tip弹框立即消失了。

方法二 :focus伪类和事件冒泡

通过:focus属性可以直接实现点击事件效果


    我是按钮
    我是文字测试君

.wrapper:focus .popup{
    display: block;
}
.popup{
    display:none;
}

这里利用的是事件冒泡原理。当按钮被点击时，触发了focus事件。事件往上传播到父元素.wrapper。因此触发了它的:focus伪类效果。进而能控制其下面的子元素属性。

云服务器 GPU云服务器模拟单击事件 css元素 DOM元素事件 java怎么模拟事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2315.html

jQuery入门笔记之（三）事件详解

摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。转自个人博客在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...

GitCafe 2019-08-19 17:17 评论0 收藏0
CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

摘要：出于美化和统一视觉效果的需求，的自定义就被提出来了。这里对实现方法做个总结。实现思路纯实现的主要手段是利用标签的模拟功能。个人建议用的和伪元素和是一个东西。向拥有键盘输入焦点的元素添加样式。向已被访问的链接添加样式。 checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，chec...

qingshanli1988 2019-08-01 18:22 评论0 收藏0
CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

摘要：出于美化和统一视觉效果的需求，的自定义就被提出来了。这里对实现方法做个总结。实现思路纯实现的主要手段是利用标签的模拟功能。个人建议用的和伪元素和是一个东西。向拥有键盘输入焦点的元素添加样式。向已被访问的链接添加样式。 checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，chec...

miqt 2019-08-29 14:12 评论0 收藏0
CSS学习笔记之选择符

摘要：子选择符的子元素同胞选择符和在后面就行必须紧跟非子选择符所有是元素孙子的元素选择器属性选择器标签名属性属性值伪类选择器动态事件，状态改变被访问过的链接伪类链接伪类。换句话说，如果选择符更明确特指度更高，无论它在哪里，都会胜出。类型，类和ID选择器带有空格的字体名称要用引起来对选择器分组可使同一规则适用于多个选择器，例子如下 th,td { padding:0 10...

20171112 2019-08-28 18:02 评论0 收藏0
神奇的选择器 :focus-within

摘要：的伪类选择器和伪元素选择器，让有了更为强大的功能。划重点，它或它的后代获得焦点。另外，划重点，这个伪类是仍处于实验室的方案。最后感谢耐心读完。CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒...

clasnake 2019-04-23 13:30 评论0 收藏0