如何应用jQuery到.element:before:hover? [英] How to apply jQuery to .element:before:hover?
本文介绍了如何应用jQuery到.element:before:hover?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用滑块滑块,但无论什么原因,当我将鼠标移动到下
或上一页
按钮,它不改变不透明度(鼠标输出:0.5,鼠标输入:1),它只是保持 1
,有一种方式,我可以应用jQuery更改这个任务的CSS?我想添加jQuery的元素如下所示:
I'm using slick slider, but for whatever the reason when I move mouse over a next
or previous
button it doesn't change the opacity (mouse-out: 0.5, mouse-in: 1) and it just stays 1
, is there a way I could apply jQuery to change the CSS for this task? The elements I want to add jQuery to are shown below:
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev:before,
.slick-prev:before,
.slick-next:before,
.slick-next:before
{
opacity: 0.5;
}
推荐答案
(function($) {
jQuery.fn.extend({
// get pseudo property
getPseudo: function(pseudo, prop) {
var props = window.getComputedStyle(
$(this).get(0), pseudo
).getPropertyValue(prop);
return String(props);
},
// set pseudo property
setPseudo: function(_pseudo, _prop, newprop) {
var elem = $(this);
var s = $("style"); // existing `style` element
var p = elem.getPseudo(_pseudo, _prop); // call `getPseudo`
var r = p !== "" ? new RegExp(p) : false;
var selector = $.map(elem, function(val, key) {
return [val.tagName
, val.id
? "#" + val.id : null
, val.className ? "." + val.className : null]
});
var _setProp = "\n" + selector.join("")
.toLowerCase()
.concat(_pseudo)
.concat("{")
.concat(_prop + ":")
.concat(newprop + "};");
return ((!!r ? r.test($(s).text()) : r)
? $(s).text(function(index, prop) {
return prop.replace(r, newprop)
})
: $(s).append(_setProp)
);
}
})
})(jQuery);
$(".show-more-after").on("click", function() {
var toggle = $(this).getPseudo(":after", "opacity");
$(this).setPseudo(":after", "opacity", toggle === "0.5" ? "1" : "0.5");
})
.show-more-after:after {
content: " abc";
opacity : 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="show-more-after">click</div>
这篇关于如何应用jQuery到.element:before:hover?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文