Как применить jQuery к элементу: before: hover?

Question

Я использую скользкий слайдер, но по какой-либо причине, когда я перемещаю мышь над кнопкой next или previous, она не изменяет непрозрачность (мышь-выход: 0,5, мышь-в-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

(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>

Answer 2

Короче: Нет, вы не можете.

Подробный ответ:

Элементы вы используете называются pseudo-elements (:before, :after, etc). Их нет в DOM, поэтому вы не можете выбрать ни один из них и изменить их стиль.

Возможный обходной путь:

Переопределение, что стили, объявив еще правила стиля для одних и тех же элементов (, например, путем введения STYLE тег, который содержит стили, которые будут замещать существующий).