Как получить значения CSS при наведении курсора?

Question

В ответ на этот вопрос у меня есть еще одна проблема - как получить значения CSS-hover при нажатии на текстовую ссылку?

Например, у меня есть эти значения для текстаhover

a.test {
    text-decoration:none;
}

a.test:hover {
    text-decoration:none;
    opacity:0.6 !important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
    filter:alpha(opacity=60) !important; 
}

<a href="#" class="test">Click Me</a>

это не получается, конечно!

$(".test").click(function(){
   alert($(this).css());
   return false;
})

Возможно ли это?

Я сталкивался с подобным вопросом , но я предпочитаю неиспользовать этот плагин.

Answer 1

Взгляните сюда

Это повторная реализация (читай: утиная перфорация) метода .css()

А вот и ДЕМО

Answer 2

Вы можете сделать что-то вроде этого, где вы создадите свой собственный список свойств CSS, которые будут применены к этому элементу (при условии, что у вас есть список), а затем циклически пролистаете их:

var cssList = ['text-decoration','opacity','filter'];

$(".test").click(function(){
    for(x in cssList){
        alert($(this).css(cssList[x]));
    }    
   return false;
})

Пример: http://jsfiddle.net/jasongennaro/GmWCz/

Конечно, вы можете использовать это до конца и добавить все свойства, если это то, что вам нужно.

Answer 3

Правильный способ сделать это выглядит так, как если бы вы создали тег стиля и переназначили свойство hover напрямую.У меня есть рабочий пример здесь .

(Кредит, когда кредит должен - я получил это от функции, определенной здесь )

Answer 4

HTML-изменения, добавление дополнительного класса:

<a href="" class="test apply-hover">Click Me</a>

CSS-изменения, изменение селектора наведения:

a.test.apply-hover:hover { ...

JS-изменения, удаление класса apply-hover при событии клика:

$(this).removeClass('apply-hover');

Пример: http://jsfiddle.net/bGKE7/1/