使用Selenium点击伪元素
我正在尝试使用硒来单击pseudo元素之后.我意识到这不能直接通过网络驱动器来完成,但似乎无法找到一种使用JavaScript的方法. 这是DOM的样子: Accounts ::after 这就是上述元素的样子.对象的左侧是"按钮"元素,而元素是右侧的右侧,带有箭头,在单击时将放下下拉菜单.如您所见,右侧没有任何标识符,这部分是使这一难以做的事情. 我已经在Stackoverflow中看到了这两个链接,并试图将答案结合起来以形成我的解决方案,但无济于事. 使用Ja
14 2024-04-13
编程技术问答社区
在按钮时如何更改光标图标
当我单击一个按钮时,如何将光标变为图标,然后将图标放在第二次点击上,然后再次成为常规光标?我正在从事React.我所拥有的是,当单击i按钮时,全局布尔值单击为true. 解决方案 这对您需要的东西有用吗? const [cursor, setCursor] = useState('crosshair'); const changeCursor = () => { setCursor(prevState => { if(prevState === 'crosshair'){ return 'pointer'; } return 'crosshair'; }); } return ( Click to change mouse cursor
18 2024-04-05
编程技术问答社区
在输入按钮上使用:首字母伪元素
我试图创建一个只有下划线的首字母的按钮. 显然,我无法使用标签,然后通过使用伪元素:第一个字母,我会用CSS意识到它.它在其他情况下效果很好,但是按钮不起作用. 还有其他解决方案? 解决方案 由于您没有共享代码,我将在这里大胆猜测. 您正在使用,因为内部没有实际的文本(显示的文本来自value=属性),:first-letter :first-letter无法使用(因为它在元素内部的文本上起作用). 相反,使用Some Value,它应该可以正常工作.
2 2024-04-05
编程技术问答社区
在不使用大纲的情况下,CSS双边界(2种颜色)?
我想知道你们认为哪种最简单的方法是在DIV周围获得两种颜色的双重边框?我尝试使用边框和轮廓在一起,并且在Firefox中起作用,但是轮廓似乎在IE中起作用,这是一个问题.有什么好方法吗? 这是我所拥有的,但概述不适合IE: 轮廓:2PX实心#36F; 边界:2PX实心#390; 谢谢. 解决方案 您可以使用伪元素添加多个边界,然后将它们放在原始边框周围.没有额外的标记.跨浏览器兼容,这已经出现在CSS 2.1以来. 我为您在JSFIDDLE上扔了一个演示....注意,边界颜色之间的间距是该示例.您可以通过更改绝对定位中的像素数来关闭它. .border { border:2px solid #36F; position:relative; z-index:10 } .border:before { content:""; display:block; position:absolute; z-inde
8 2024-04-02
编程技术问答社区
Firefox-CSS:伪元素 "before "的边界半径问题
我有一个带有正面和背面的卡片元素(Bootstrap-4),在悬停在后侧. 为了创建"折叠角效应",我在前卡上使用伪元(:之前),该元素适合所有浏览器,除了Firefox. 假元素的左下角也应该舍入,因此我设置了一个边界 - 拉迪乌斯.不幸的是,在Firefox中,角落没有四舍五入,而是伪元素中显示了一个奇怪的盒子. 有什么想法在Firefox中引起了这个问题?我已经玩过定位,z索引,溢出等.但是我找不到根本原因. 预先感谢! https://jsfiddle.net/rbv5ob20/ html: 在 .card { color: white; border: transparent; border-radius: 10px; -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: -4px 4px 5px 0px rgba(50,
4 2024-04-02
编程技术问答社区
在背景图像上使用前后伪元素
我想从三个(背景)图像中构建导航项目,其中第一个和最后一个固定宽度,以及中央宽度宽度,具体取决于导航项目中文本的宽度.我被认为是在之前和之后使用伪元素是最好的方法.但是,当我尝试此操作时,导航项目的主要(中央)背景图像与后背景图像重叠. 您可以看到我在此页面. 这是CSS: .box { background-image: url(nav/images/nav_02.png); background-repeat: repeat; height:20px; position: absolute; padding: 10px 13px; } .box:before { left: 0; background-image: url(nav/images/nav_01.png); } .box:after { right: 0; background-image: url(nav/images/nav_03.
0 2024-03-27
编程技术问答社区
如何在Nightwatch中测试伪元素的css属性
我想使用NightWatch在我的网站上测试背景图像是正确的,但是它是伪元素之前的A ::的背景,这是CSS .icon-circle-delete:before { content: ''; background: url(images/svg/delete.svg) no-repeat 50% 50%; display: inline-block; width: 16px; height: 16px; 我尝试了以下内容: .assert.cssProperty("i.icon-circle-delete", "background", "url(clientlib-site/images/svg/delete.svg) "); .assert.cssProperty("i.icon-circle-delete:before", "background", "url(images/svg/delete.svg) ");
0 2024-03-21
编程技术问答社区
jQuery .click() 事件用于CSS伪元素(:before/:after)?
当我通过CSS伪eLEMENTS插入的内容:before:和:after时,我想触发一个jQuery动画.但是,我不确定该怎么做.我的第一个猜测是$(#id:before).click()无效.这是JQuery功能的一部分吗?如果是这样,我将如何选择before/after内容? 解决方案 jQuery不支持CSS :before和:after选择器. 选择兄弟姐妹,使用.siblings()然后从那里过滤. http://api.jquery.com/siblings/
6 2024-02-26
编程技术问答社区
如何用jQuery将:before选择器动画化
我有一些元素:伪选择器定义之前.我需要添加一些过渡,动画,但在CSS中是不可能的.因此,我认为我可以使用jQuery做到这一点,但是有些事情也不正确.你能帮助我吗?这是我的代码: var pilot = $('#remote_control'), pilot_shadow = $('#remote_control:before'); pilot.on({ mouseenter: function(){ pilot_shadow.animate({ opacity: 0 }); } }); 解决方案 如果使用 http://jquery.lukelutman.com/插件/pseudo/jquery.pseudo.js 当您这样做时,它将起作用: pilot_shadow = $('#remote_control:before');
2 2024-02-26
编程技术问答社区
改变angular2中伪元素的风格
是否可以在Angular2中使用[style]或[ngStyle]更改伪元素的样式? 为了对DIV进行模糊效果,例如覆盖层,我应该在伪元素上设置背景图像. 我尝试了 之类的东西 它不起作用.我也尝试了这个 解决方案 不,这是不可能的.实际上,这不是一个角度问题:伪元素不是DOM树的一部分,因此,不暴露任何可用于与它们相互作用的DOM API. 通常的方法,如果您想以编程方式处理伪元素,则是间接的:您添加/删除/更改类,在CSS中,此类会影响相应的伪元素.因此,在您的情况下,您可以还有一个更改必要样式的类:
16 2024-02-20
编程技术问答社区
列表导航中垂直对齐的伪元素
我已经创建了一个列表样式导航,每个超链接可以是多行,在每个超链接元素之后,我添加了一个pseudo元素"箭头"之后,是否可以垂直对齐伪元素? 要求在IE8及以上工作. 标记: Cover Lorem ipsum dolor sit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores cum!
12 2024-01-24
编程技术问答社区
修改jQuery的javascript,在:checked而不是:hover时触发--图像交换
我有一块很棒的jQuery,当用户徘徊在图像上时,可以交换图像.查看下面的代码以查看它. 它使用mouseenter和mouseleave. 我想修改它,以便当特定输入/标签为:checked. 时,图像交换触发器 您可以在这里看到我的演示页面: http://test.davewhitley.com/not-wp/not-wp/static_folder/index.php 为您提供一些背景,我有4个输入/标签.检查一个时,一组图像将从黑白换成其颜色版本.我有每个图像的两个文件(image_s.jpg和image_o.jpg). 我正在使用:checked伪类进行一些过滤.检查输入时,某些图像保持完整opacity,而另一些图像则将其简化为opacity:0.1 我只需要在检查输入为颜色后保持完全不透明度的图像. 基本上我想在JavaScript中说: 每当输入为#container在#container swap _s.jpg中使用_o.
20 2024-01-18
编程技术问答社区
如何将变量添加到伪类的jquery选择器?
是否可以在伪元素的jQuery字符串选择器中添加变量?我已经尝试了下面的两个代码,但没有人看到工作,您能帮我吗? $(function () { $("option").click(function(){ var filt1 = $(this).attr('id'); $("#filter2 option[class!=filt1]").hide(); $("#filter2 option[id*=filt1]").show(); }); }); 和 $(function () { $("option").click(function(){ var filt1 = $(this).attr('id'); $('#filter2 option[class!='+ filt1+ ']').hide(); $('#filter2 option[id*='+ filt1+']').show();
10 2024-01-18
编程技术问答社区
jQuery 悬停效果::after
当我悬停在Div上时,我会发射几种效果.问题在于,DIV还具有伪元素::之后,它使用内容CSS规则使用虚拟元素(播放按钮)填充了DIV. 当我悬停在div的任何部分时,我的悬停效果都起作用 简单地,我想知道是否有一种方法可以指向使用jQuery之后的元素.我试图将:: after元素定义为一个名为" play"的变量,但那里也没有运气.这是我的脚本: var play = $('a.image-wrap::after'); $(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () { $('.image-holder').css('background-color', color); $('.image-holder img').css({ 'mix-blend-mode': 'multiply',
28 2024-01-17
编程技术问答社区
使用jQuery切换一个伪元素
我正在尝试使用jQuery切换:after pseudo-element(即显示/隐藏)的显示.我成功地切换了DIV的显示,但现在想用:after. 进行此操作. :after用于在框上创建箭头. 我的尝试可以在这里看到:这是其中的摘录,显示了应该与CSS选择器相关的jQuery: $("#supportus-button-1").click(function () { $(".supportus-button:after").toggle(); }); 解决方案 我认为这里最简单的方法是使用CSS类来限制应用:after规则的范围: .supportus-button:not(.clicked):after { ... } 这是一个更新的小提琴:所有当前浏览器支持:not CSS功能:支持与:after pseudoElement相同.
16 2024-01-16
编程技术问答社区
在jQuery中对css的after和before选择器进行动画处理
是否有可能对CSS的选择器进行动画:之前和:在jQuery的.aimate()函数中?如果没有,这样做的最好替代方法是什么? 解决方案 简而 但是,您可以使用CSS3过渡来为伪元素进行动画化,但请注意,仅 Firefox 4.0+当前支持它,因此您的竞争环境非常有限. 如果很重要,只需在要使它们动画的元素中创建新的子元素. 更新 pseudo元素动画/过渡现在在Chrome中得到支持截至2013年1月1日./p> 您可以找到浏览器支持表
8 2024-01-16
编程技术问答社区
使用JavaScript动态的伪元素CSS
是否可以动态设置伪元素的CSS?例如: jQuery动态造型有助于容器 $('#help').css({ "width" : windowWidth - xOffset, "height" : windowHeight - yOffset, "bottom" : -windowHeight, "left" : 200 }); jQuery尝试设置帮助容器的内部边框: $('#help:before').css({ "width" : windowWidth - xOffset, "height" : windowHeight - yOffset }); 上述CSS文件 #help { opacity: 0.9; filter:alpha(opacity=90); -moz-opacity: 0.9; z-index: 1000000; bott
10 2024-01-15
编程技术问答社区
伪元素内容的数据内容中的Unicode
我想使用jQuery将Unicode放入数据包含属性中,以便将其用于伪元素内容,但是我找不到正确的格式.您如何显示Unicode?流浪只是显示▼. a::after { content: attr(data-content); } ... $("a").attr ("data-content", "▼"); 解决方案 以这种格式插入,使用\u,在JavaScript中,表示字符串文字 中的Unicode编号 $("a").attr ("data-content", "\u25BC"); 来自 您可以在字符串文字,正则表达式和标识符中使用Unicode逃生序列.逃生序列由六个ASCII字符组成:\ u和一个四位数的十六进制数字.例如,\ u00a9代表版权符号. JavaScript中的每个Unicode逃生序列都被解释为一个字符. $("a").attr ("data-conten
8 2024-01-15
编程技术问答社区