Tag: 伪元素

修改jQuery javascript以触发：选中而不是：hover – image swap: 当用户将鼠标hover在图像上时，我有一个很棒的jQuery交换图像。看看下面的代码来看看它。它使用mouseenter和mouseleave 。我想修改它，以便在:checked特定输入/标签时触发图像交换。你可以在这里看到我的演示页面： http://sofzh.miximages.com/javascript/标签。选中一个图像后，一组图像将从黑白交换为其颜色版本。我为每个图像都有两个文件（image_s.jpg和image_o.jpg）。我使用:checked伪类进行一些过滤。检查输入时，某些图像保持完全opacity而其他图像则降低到opacity:0.1 在将输入检查为颜色后，我只想要保持完全不透明度的图像。所以基本上我想在javascript中说：每当输入是:checked在#container swap _s.jpg中用_o.jpg 。任何帮助都会很棒。更新1：澄清：演示中没有发生图像交换。检查输入时，仅更改opacity 。除了不透明度的变化，我想要一个图像交换。默认情况下，所有图像都是黑白图像，当选择输入时，所选图像将从黑白变为彩色（通过图像交换）。更新2：简单地说，我希望所有图像都是黑白的，直到用户点击其中一个过滤标签（打印，网页，字体等）。当点击标签时，未过滤图像的不透明度会降低，保持完全不透明度的滤镜图像会换成彩色图像。更新3：我似乎无法得到以下答案为我工作。如果它完成了工作，我愿意放弃输入/：checked /伪类过滤技术。此外，我工作测试会帮助我很多（JSfiddle）。这是图像交换javascript： $(‘.imgover’).each(function() { var std = $(this).attr(“src”); var hover = std.replace(“_s”, “_o”); $(this).clone().insertAfter(this).attr(‘src’, hover).removeClass(‘imgover’).siblings().css({ position:’absolute’ }); $(this).mouseenter(function() { $(this).stop().fadeTo(200, 0); }).mouseleave(function() { $(this).stop().fadeTo(200, 1); }); });

伪元素内容的数据内容中的Unicode: 我想使用JQuery将unicode放在data-content属性中，以便将其用于伪元素内容，但我找不到正确的格式。你如何显示unicode？只是显示▼ 。 a::after { content: attr(data-content); } https://stackoverflow.com/questions/26025774/unicode-in-data-content-for-pseudo-element-content/… $(“a”).attr (“data-content”, “▼”);

使用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; bottom: -550px; left: 400px; background-color: #808080; border: 5px dashed #494949; -webkit-border-radius: […]

在jQuery中选择器之前和之后动画css: 是否有可能为CSS的选择器设置动画：在jQuery的.animate（）函数之前和之后？如果没有，这样做的最佳选择是什么？

使用`.css`表示伪元素: 可能重复：使用jQuery操作CSS：before和：after伪元素我想jQuery等效这个CSS代码： p:before { content: ‘Intro!’; } 我天真地试过$(‘p:before’).css(‘content’, ‘Intro!’); 但它不起作用。如何使用jQuery进行伪元素CSS修改？

CSS伪元素的jQuery .click（）事件（：之前/：之后）？: 我想在我通过CSS伪元素插入的内容时触发jQuery动画:before: and :after被点击。但是，我不知道该怎么做; 我的第一个猜测， $(#id:before).click()没有用。这是jQueryfunction的一部分吗？如果是这样，我将如何选择before / after内容？

如何将变量添加到伪类的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(); }); });

是否可以使用伪元素使包含元素环绕绝对定位的元素（如clearfix）？: 我正在为我的网站制作一个轻量级的响应式jQuery滑块，并使用了非常常见的标记： HTML： CSS： #slider { width:80%; max-width:800px; margin:0 auto; } #slider ul { margin:0px; padding:0px; list-style:none; width:100%; } #slider ul li { width:100%; position:relative; } #slider img { width:100%; position:absolute; top:0px; box-shadow:0px 20px 40px rgba(0,0,0,.66); } #slider img.active { z-index:1; } 我遇到的问题是我的绝对定位幻灯片正在做他们应该做的事情并从页面结构中删除它们。（这不是我希望他们做的，但它是堆叠它们的简单方法）。我一直在阅读有关今天的CSS Pseudo-Elements以及人们正在使用它们的所有很酷的东西。它让我想到……他们可以用来“清除”这些绝对定位的元素吗？我的想法是，可能有办法做以下事情： #slider img:before { content:””; display:block; position:static; } 显然需要更多的样式来实现这一点（因为它不会渲染我想要的东西……我知道此时你可能会想到“为什么不指定容器的高度并完成用它？“嗯，幻灯片的响应意味着当它们收缩时，容器的高度也会缩小。 […]

使用jQuery切换伪元素: 我试图使用jQuery切换一个:after伪元素（即显示/隐藏它）的显示。我成功地切换了div的显示，但是现在想要用:after 。 :after用于在盒子上创建箭头。我的尝试可以在这里看到： http ： //jsfiddle.net/beechboy707/7um9knxt/1/ 以下是它的摘录，显示了与CSS选择器相关的jQuery： $(“#supportus-button-1”).click(function () { $(“.supportus-button:after”).toggle(); });

如何在使用jQuery选择器之前进行动画处理: 我有一些元素：在伪选择器之前定义。我需要为它添加一些过渡动画，但在CSS中它是不可能的。所以我认为我可以用jQuery做到这一点，但有些东西也不正常。你能帮助我吗？这是我的代码： var pilot = $(‘#remote_control’), pilot_shadow = $(‘#remote_control:before’); pilot.on({ mouseenter: function(){ pilot_shadow.animate({ opacity: 0 }); } });