首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:hover不适用于动态添加的<li>

:hover是CSS中的一个伪类选择器,用于选择鼠标悬停在元素上时的样式。然而,对于动态添加的<li>元素,:hover选择器可能不适用。

原因是动态添加的元素在页面加载时并不存在于DOM中,因此无法通过:hover选择器来选中。这是因为:hover选择器是基于用户与页面交互的状态来触发的,而动态添加的元素并没有与用户的交互。

解决这个问题的方法之一是使用JavaScript来监听鼠标悬停事件,并在事件触发时添加相应的样式。可以通过addEventListener方法来添加鼠标悬停事件的监听器,并在事件处理函数中修改元素的样式。

另外,如果需要在动态添加的<li>元素上应用:hover样式,也可以考虑使用CSS的类选择器。在动态添加元素时,为其添加一个特定的类名,然后在CSS中使用该类名来定义:hover样式。

总结起来,对于动态添加的<li>元素,可以通过JavaScript监听鼠标悬停事件并添加样式,或者使用CSS的类选择器来应用:hover样式。具体的实现方式可以根据具体的需求和场景来选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • PCA不适用于时间序列分析的案例研究

    我们甚至可以将它用于时间序列分析,虽然有更好的技术。在这篇文章中,我想向您介绍动态模式分解 (DMD),这是一种源自我的研究领域:流体动力学的用于高维时间序列的线性降维技术。...动态模式分解 Dynamic Mode Decomposition 从数学上讲,主成分分析主要用于描述数据集的二阶统计数据,而不是动态数据。DMD来了。假设我们的数据是由一个未知的动态过程产生的 ?...在收集了相当多的温度和速度场快照后,进行了 DMD 分析。结果如下所示。 ? 混沌热虹吸管的 DMD 分析。1 级模型捕获速度场中的大部分动态,而 2 级模型需要用于温度。...由于这种简单性,事实证明它也经常用于不应该使用或存在同样简单但更好的方法的情况。高维时间序列分析就是这样的一个例子。我希望您现在确信,在这种情况下,动态模式分解会更好。...有些包括用于控制目的的输入和输出[4]。其他人将 DMD 与来自压缩感知的想法相结合,以进一步降低计算成本和数据存储 [5],或将小波用于多分辨率分析 [6]。可能性是无止境。

    1.5K30

    Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。...研发也美滋滋的开始开发。 但是,好景不长。。。 研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天。最后没解决。...之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。今天逮到了就不能放过!...正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah) jquery中动态新增的元素节点无法触发事件问题(同上) 解决方法: ? ?...值得注意的是:亲测此方法无效,可能是我用的jq的版本太高了,1.9多,已经不支持这个方法了 第二个方法: ? 但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。  王者方法:on ?

    4.9K50

    如何实现动态添加的元素添加点击事件

    在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?...原生JavaScript 原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。...具体的代码实现如下: 第一:onclick 添加工作经历 的父级(这是这里问题的核心,您需要绑定到存在的东西,不要绑定到动态内容),这可以(也是最简单的选项)是document....例如 $('.buttons').on('click', 'button', function(){ // do something here }); 将适用于 <!

    4K20

    DynaVINS:用于动态环境的视觉惯性SLAM

    摘要 视觉惯性里程计和SLAM算法广泛应用于各种领域,如服务机器人、无人机和自主车辆。大多数SLAM算法都是基于静态环境假设。然而,在现实世界中,存在各种动态对象,并且它们降低了姿态估计精度。...(2) 提出了一种新的BA算法,用于同时估计相机姿态和丢弃动态对象中明显偏离运动先验的特征。 (3) 提出了一种鲁棒的全局优化方法,将约束分组为多个假设,以拒绝来自暂时静态对象的回环。...图3 鲁棒BA框架,每个特征都有一个权重用于视觉残差,每个权重通过正则化因子和权重动量因子进行优化 3.3 关键帧分组 在传统方法的回环检测中,面对临时静止的物体,假阳性闭环可能导致SLAM框架的失败。...如果用于匹配的特征来自同一对象,即使匹配的Ck和Cm不同,匹配的估计位姿也会位于彼此接近的位置。因此,通过计算回环位姿之间的欧氏距离,可以将欧氏距离较小的相似闭环进行聚类,结果如图4(c)所示。...图4 多假设聚类的过程 (a)对共享所跟踪功能的最少数量的关键帧进行分组 (b) 用于匹配的特征有两类:静态特征和临时静态特征 (c) 临时静态特征从前一位置移动 4.

    1.7K10

    前端JavaScript中的动态事件添加

    前言 在前端开发中,交互性是至关重要的。动态事件添加是一种在JavaScript中实现交互的重要技术。本文将介绍动态事件添加的概念和优势,并详细介绍两种常用的动态事件添加方法。...动态事件添加的优势 动态事件添加具有以下优势: 灵活性: 可以根据特定条件或动态生成的内容来添加事件,实现更加灵活的交互效果。 可扩展性: 可以在任何时候添加或移除事件,方便进行功能的扩展和调整。...通过addEventListener()方法动态添加事件 addEventListener()方法是DOM对象提供的一种常用的事件添加方式。...可以通过以下步骤动态添加事件: 1.获取需要添加事件的DOM元素。 2.使用addEventListener()方法,指定要添加的事件类型和对应的事件处理函数。...3.在父元素的事件处理函数中,通过判断事件的目标元素,确定要执行的操作。 总结 动态事件添加是前端开发中实现交互性的重要手段。通过动态事件添加,我们可以实现灵活、可扩展的交互效果,减少重复代码的编写。

    30820

    能用HTMLCSS解决的问题就不要使用JS!

    hover时的高亮,可以用css的:hover选择器: nav li:hover{    opaciy: 1; } 加上:hover选择器的优先级将会高于原本的,鼠标hover的时候将会覆盖默认样式,即高亮...我一个纯展示的静态页面,为啥要写js呢,是吧。 注意这个hover选择器特别好用,几乎适用于所有需要用鼠标悬浮时显示的场景。 2....,否则中间有空隙的话,上面添加的菜单hover就不能发挥作用了,但是实际情况下从美观的角度,两者是要有点距离的。...,又监听了mouse事件,用mouse控制显示隐藏,双重效果会有什么情况发生,如果按正常套路,在mouse事件里面hover的时候,添加了一个display: block的style,会覆盖掉CSS的设置...JS是万能的,几乎可以做任何事情,但是有时候会显得十分笨拙,在js/html/css三者间灵活地切换,往往会极大地简化开发,没有谁是最好的语言,只有适不适合。只要用得好,不管黑猫白猫,都是好猫。

    3K20

    能用HTMLCSS解决的问题就不要使用JS

    hover时的高亮,可以用css的:hover选择器: nav li:hover{ opaciy: 1; } 加上:hover选择器的优先级将会高于原本的,鼠标hover的时候将会覆盖默认样式,即高亮...我一个纯展示的静态页面,为啥要写js呢,是吧。 注意这个hover选择器特别好用,几乎适用于所有需要用鼠标悬浮时显示的场景。 2. 鼠标悬浮时显示 鼠标悬浮的场景十分常见,例如导航的菜单: ?...,否则中间有空隙的话,上面添加的菜单hover就不能发挥作用了,但是实际情况下从美观的角度,两者是要有点距离的。...,又监听了mouse事件,用mouse控制显示隐藏,双重效果会有什么情况发生,如果按正常套路,在mouse事件里面hover的时候,添加了一个display: block的style,会覆盖掉CSS的设置...这样还有一个好处,就是在响应式开发的时候,可以借助媒体查询动态地改变display的属性,从而改它排列的方式。

    3.8K40

    SAP MM里的ERS功能不适用于供应商寄售采购模式

    SAP MM里的ERS功能不适用于供应商寄售采购模式 今天收到了一个做零售行业项目的SAP同行的问题,客户问她是否可以在供应商寄售采购流程里启用SAP的ERS功能。...我甚为吃惊,感觉这个SAP客户的问题还不简单,不浅薄。同时也觉得这个客户对SAP的学习很积极很主动,居然对很多SAP顾问没有用过的ERS功能有所了解。...这个功能的好处是提供了一种自动化的功能,可能一些国外的客户喜欢这个功能,但是在国内很少有客户会使用这个功能。...另一方面,这个功能据说好像跟国内财务管理制度并不能很好的匹配。 笔者在网上也查了资料,很多SAP同行的意见跟我一致,都是认为ERS功能只适用于正常采购模式,而不适用于供应商寄售采购模式。...聪明的你,有什么好的建议呢? -完- 写于2022年1月11日晚。

    95820

    Oracle 动态添加分区的实现方法

    为了解决为分区表自动扩展分区的需求,我们编写了一个存储过程,用来在向表中insert数据时,动态的对表进行添加分区或清除分区。只需要在insert之前,执行下边存储过程即可。...,按照指定频率添加分区');         MAX_PARTITION_DATE := MAX_PARTITION_DATE + ADD_FREQ;         while MAX_PARTITION_DATE...所以,默认只能对用户自己的表的分区进行动态扩展和分区数据清除。...如果想要对其他用户的表进行动态分区管理,需要将user_tab_partitions,user_part_tables,tab换成dba_tab_partitions,dba_part_tables,dba_tables...如果各个用户都需要使用动态分区扩展与清理,可以在每个用户下边部署这个存储过程,这样就不用跨用户之间动态管理分区。

    1.6K00

    前端特效开发 | JS实现聚光灯看图效果

    HTML5学堂(码匠):昏暗的场景下,查看任何的图片、效果都会给人不适的感觉,所以人们往往喜欢在明亮的场景中来体验世界的美好。...当用户的鼠标移入到某一张图片时,“镁光灯”即聚焦在当前的图片上,这张图片就高亮的展示出来,同时为了更突出所选的这张图片,就把没有被选择到的其它图片添加阴影透明。...;同时为了让鼠标移入时有更好的展示状态,在hover时特地为图片增加一个白色的边框,以区分当前展示的图片区域。...2.2 功能逻辑分析 首先动态的获取了当前每张图片的大小,并设定一个透明度变量; 然后借助JQ的hover()方法,实现鼠标移入移出的图片展示; 最后当用户的鼠标移开了无序列表时,还原当前图片的不透明状态.... $('.spotlight ul li').hover(function(){ //...找到它里面的图像,并添加活动类,并更改不透明度为1(无透明度) $(this).find('

    4.4K50

    超强的 Anchor Positioning 锚点定位

    简单翻译一下,其核心就在于,Anchor Positioning(锚点定位) 用于增强元素的绝对定位的能力。...,上面我们说的这一句话的含义了: Anchor Positioning(锚点定位) 用于增强元素的绝对定位的能力。...CSS 拥有了父选择器的能力,此选择器用于选择包含指定子元素的父元素,而本例中,利用了 :has 选择器甚至能选择包含指定伪类状态的能力,实现了 --target 的动态切换。...,实现当任意一个 li> 被 hover,则设置 --target 锚点变量为当前的 li> 元素,也就是实现了锚点元素的动态变换 最终,只需要让下划线,基于动态的锚点进行定位即可,也就是我们每次...Hover 的 li 元素,那么弹框也就实现下划线动态定位 给下划线的 left 设置过渡效果 transition,实现跟随动画效果 让我们一起来看看代码,看似复杂,代码量也很少: ul {

    44030

    用于类别增量学习的动态可扩展表征 -- DER

    用于类别增量学习的动态可扩展表征 -- DER 这次介绍一种类似表征学习的训练方法,用于类别的增量学习,来自于CVPR2021的一篇文章"DER: Dynamically Expandable Representation...首先,我们需要补充一些预先的概念,比如类别增量学习以及表征学习。 类别增量学习 传统的分类学习中,我们通常在训练的时候就有全部的类别,测试的时候也是对全部的类别的数据进行测试。...这里,文章将表征学习划分成3类: 基于正则化的方法 基于蒸馏的方法 基于结构的方法 基于正则化的方法一般都会有一个较强的假设,其主要是根据估计的方法,对参数进行微调。...基于蒸馏的方法则是会依赖于所使用的数据的数量和质量。 基于结构的方法,会引入额外的新的参数进来,用来对新类别的数据进行建模。...需要注意的是,当使用Mask机制是,也就是利用Mask的结果对参数进行裁剪,得到的模型在参数量上降低的很多,正确率仍然能够保持。

    1.1K10
    领券