如何将 jQuery 应用于 .element:before:hover？

Question

我正在使用光滑的滑块，但无论出于何种原因，当我将鼠标移到 next 或 previous 按钮上时，它不会改变不透明度（鼠标移开：0.5，鼠标-in: 1) 它只是停留在 1，有没有一种方法可以应用 jQuery 来更改此任务的 CSS？我要添加 jQuery 的元素如下所示：

.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;
}

Answer 1

简而言之：不，你不能。

详细答案：

您正在使用的元素称为 pseudo-elements (:before, :after, etc). They are not present in the DOM，因此您不能 select 它们中的任何一个并更改它们的样式。

可能的解决方法：

通过为相同元素声明另一个样式规则来覆盖该样式（例如，通过注入包含将覆盖现有样式的样式的 STYLE 标签).

Answer 2

(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 + ";}"); // css semicolon
      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？

How to apply jQuery to .element:before:hover?

html

javascript

css

jquery

hover