Читать: hover pseudo class with javascript

Я создал функцию, которая перезаписывает: наведение некоторых элементов на странице. Он исчезает между нормальным и эффектом: hover. Это для я должен был создать класс .hover в моем файле CSS. Я думаю, что это немного нечисто. Как я мог прочитать содержимое псевдокласса: hover?Читать: hover pseudo class with javascript

источник

2009-08-16 meo

ОБНОВЛЕНИЕ: Я как-то ошибся. Следующий пример не работает. См. @bfavaretto's comment для пояснения.

В Firefox, Opera и Chrome или любом другом браузере, который правильно реализует window.getComputedStyle, очень просто. Вы просто должны пройти «парить» в качестве второго аргумента:

<!DOCTYPE html> 

<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
div { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background: red; 
} 
div:hover { 
    background: green; 
} 
</style> 
</head> 
<body> 

<div></div> 

<script type="text/javascript"> 
window.onload = function() { 
    var div = document.getElementsByTagName("div")[0]; 
    var style = window.getComputedStyle(div, "hover"); 
    alert(style.backgroundColor); 
}; 
</script> 
</body> 
</html>

Но я не верю, что есть еще решение для Internet Explorer, для использования document.styleSheets как предложено Гамбо кроме. Но будут различия. Итак, класс .hover - лучшее решение. Не совсем нечисто.

источник

2009-08-16 19:54:16

thx! Возможно, это не нечисто, но человек, который использует мою функцию, должен знать, что он должен делать класс. Было бы неплохо избежать этого. – meo

@ david, из любопытства, как вы собираетесь справиться с проблемой IE? –

@Ionut: это отличный пример непоследовательности браузера, который не стоит вашей фиксации времени. Если кто-то использует нижний браузер, он все равно получит рабочий сайт, у него просто не будет приятных прикосновений. – nickf

Вы можете получить доступ к document.styleSheets и искать правило, применяемое к этому конкретному элементу. Но это не чище, чем использование простого дополнительного класса.

источник

2009-08-16 19:33:29 Gumbo

таблицы стилей, загруженные из внешних файлов не доступны в document.styleSheets. –

Если есть какие-то люди здесь, которые используют вопросы, принятые ответ, но он не будет работать, вот хорошая функция, которая может:

function getPseudoStyle(id, style) { 
    var all = document.getElementsByTagName("*"); 
    for (var i=0, max=all.length; i < max; i++) { 
     var targetrule = ""; 
     if (all[i].id === id) { 
      if(all[i].selectorText.toLowerCase()== id + ":" + style) { //example. find "a:hover" rule 
       targetrule=myrules[i] 
      } 
     } 
     return targetrule; 
    } 
}

источник

2012-09-27 19:20:05

Это тоже не сработает, пожалуйста, проверьте мой ответ. – bfavaretto

Что такое 'myrules' в коде? –

Использование getComputedStyle, как на принятый ответ не будет работать, потому что :

Вычисленный стиль для состояния зависания доступен только в том случае, если элемент фактически находится в этом состоянии.
Второй параметр, равный getComputedStyle, должен быть пустым или псевдоэлементом. Он не работает с :hover, потому что это псевдокласс.

Вот альтернативное решение:

function getCssPropertyForRule(rule, prop) { 
    var sheets = document.styleSheets; 
    var slen = sheets.length; 
    for(var i=0; i<slen; i++) { 
     var rules = document.styleSheets[i].cssRules; 
     var rlen = rules.length; 
     for(var j=0; j<rlen; j++) { 
      if(rules[j].selectorText == rule) { 
       return rules[j].style[prop]; 
      } 
     } 
    } 
} 

// Get the "color" value defined on a "div:hover" rule, 
// and output it to the console 
console.log(getCssPropertyForRule('div:hover', 'color'));

Demo

источник

2012-09-27 19:52:39 bfavaretto

Подозрительно идентичный, но метод [этот ответ] (http://stackoverflow.com/a/16966533/2231440) позволяет выбирать селектора, которые не являются целым выбором правил. – Trojan

Это не будет работать с таблицами стилей в других доменах из-за ограничений домена. так что это частичное решение – MindFold

Читать: hover pseudo class with javascript

ответ

Смежные вопросы