如何应用jQuery到.element：before：hover？ [英] How to apply jQuery to .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屋！