2

Добрый день.

Можно ли в jQuery применить .css() метод к псевдоэлементу добавленному через :before?

div:before {
  content: "";
  position: absolute;
  background: url(image.png) no-repeat;
  width: 73px;
  height: 23px;
  opacity: .8; //хочу менять opacity до .2 при наведении на div
}
<div>Блок</div>

9
  • 2
    рекомендую
    – Sh4dow
    Commented 22 мая 2012 в 12:10
  • 3
    @Denis Masster, класс - родительский элемент. В JS просто нельзя получить before/after, поэтому прописываем все в CSS и щелкаем родительским классом. В вашем случае, однако, и это слабо поможет, потому рекомендую пересмотреть структуру. Хотя в особо запущенном случае вы можете сделать такую жесть: /* CSS */ div.frame1:before { opacity: 0.8; } div.frame2:before { opacity: 0.75; } ... div.frame12:before { opacity: 0.2; } и анимировать классами) но это - настоящий китайский хардкор)
    – Sh4dow
    Commented 22 мая 2012 в 12:28
  • 2
    рядом сделал еще один див. хардкор мне не нужен :) спасибо Commented 22 мая 2012 в 12:34
  • 4
    @Denis Masster, откуда взялась "часточка .vis-"? Это тайны шаманства )) Просто у Sh4dow есть магический бубен )) А если серьезно, то это класс, который чередуется с классом parent посредством метода toggleClass().
    – Deonis
    Commented 22 мая 2012 в 12:53
  • 1
    Намёком на правильное решение даю ссылку на ответы в этой теме. Commented 22 мая 2012 в 15:04

3 ответа 3

3

Если нужно именно у псевдоэлемента изменить, то я на такой случай когда-то скрипт написал.

(function(a){'use string';a.pseudoElements={length:0};var b=function(c){if('object'==typeof c.argument||c.argument!==void 0&&c.property!==void 0){for(var d of c.elements.get()){d.pseudoElements||(d.pseudoElements={styleSheet:null,before:{index:null,properties:null},after:{index:null,properties:null},id:null});var e=function(){if(null!==d.pseudoElements.id)return+d.getAttribute('data-pe--id')!==d.pseudoElements.id&&d.setAttribute('data-pe--id',d.pseudoElements.id),'[data-pe--id="'+d.pseudoElements.id+'"]::'+c.pseudoElement;var k=a.pseudoElements.length;return a.pseudoElements.length++,d.pseudoElements.id=k,d.setAttribute('data-pe--id',k),'[data-pe--id="'+k+'"]::'+c.pseudoElement}();if(!d.pseudoElements.styleSheet)if(document.styleSheets[0])d.pseudoElements.styleSheet=document.styleSheets[0];else{var f=document.createElement('style');document.head.appendChild(f),d.pseudoElements.styleSheet=f.sheet}if(d.pseudoElements[c.pseudoElement].properties&&d.pseudoElements[c.pseudoElement].index&&d.pseudoElements.styleSheet.deleteRule(d.pseudoElements[c.pseudoElement].index),'object'==typeof c.argument){if(c.argument=a.extend({},c.argument),!d.pseudoElements[c.pseudoElement].properties&&!d.pseudoElements[c.pseudoElement].index){var g=d.pseudoElements.styleSheet.rules.length||d.pseudoElements.styleSheet.cssRules.length||d.pseudoElements.styleSheet.length;d.pseudoElements[c.pseudoElement].index=g,d.pseudoElements[c.pseudoElement].properties=c.argument}var h='';for(var i in c.argument)d.pseudoElements[c.pseudoElement].properties[i]='function'==typeof c.argument[i]?c.argument[i]():c.argument[i];for(var i in d.pseudoElements[c.pseudoElement].properties)h+=i+': '+d.pseudoElements[c.pseudoElement].properties[i]+' !important; ';d.pseudoElements.styleSheet.addRule(e,h,d.pseudoElements[c.pseudoElement].index)}else if(void 0!==c.argument&&void 0!==c.property){if(!d.pseudoElements[c.pseudoElement].properties&&!d.pseudoElements[c.pseudoElement].index){var g=d.pseudoElements.styleSheet.rules.length||d.pseudoElements.styleSheet.cssRules.length||d.pseudoElements.styleSheet.length;d.pseudoElements[c.pseudoElement].index=g,d.pseudoElements[c.pseudoElement].properties={}}d.pseudoElements[c.pseudoElement].properties[c.argument]='function'==typeof c.property?c.property():c.property;var h='';for(var i in d.pseudoElements[c.pseudoElement].properties)h+=i+': '+d.pseudoElements[c.pseudoElement].properties[i]+' !important; ';d.pseudoElements.styleSheet.addRule(e,h,d.pseudoElements[c.pseudoElement].index)}}return a(c.elements)}if(void 0!==c.argument&&void 0===c.property){var d=a(c.elements).get(0),j=window.getComputedStyle(d,'::'+c.pseudoElement).getPropertyValue(c.argument);return d.pseudoElements?a(c.elements).get(0).pseudoElements[c.pseudoElement].properties[c.argument]||j:j||null}return console.error('Invalid values!'),!1};a.fn.cssBefore=function(c,d){return b({elements:this,pseudoElement:'before',argument:c,property:d})},a.fn.cssAfter=function(c,d){return b({elements:this,pseudoElement:'after',argument:c,property:d})}})(jQuery);

$('#target').cssBefore('opacity', '.2');
#target:before {
  content: "Before";
  opacity: 0.8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">Блок</div>

Но я бы посоветовал изменять свойство заменой класса

$('#target').addClass('new-opacity');
#target:before {
  content: "Before";
  opacity: 0.8;
}

#target.new-opacity:before {
  opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">Блок</div>

1

Добавь просто на div класс и в css на этот класс сделай .my_hover_class:hover:before и добавь ты туда opacity: 0.2 и никакие лагающие и безобразные jquery костыли не нужны

1
  • дождался ответа. Commented 13 нояб. 2017 в 11:30
0

Повесить это на ховер:

$('head').append('<style>div:before{
  content: "";
  position: absolute;
  background: url(image.png) no-repeat;
  width: 73px;
  height: 23px;
  opacity: .2;
}</style>');

ну,и очищать потом.

2
  • А если там будет transition, то этот костыль не сработает
    – IC_
    Commented 13 нояб. 2017 в 1:56
  • Зачем перечислять все свойства, когда достаточно одного?
    – Qwertiy
    Commented 13 янв. 2018 в 22:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.