Могу ли я отключить эффект CSS: hover через JavaScript? - PullRequest
Новая
       37

Могу ли я отключить эффект CSS: hover через JavaScript?

93 голосов
/ 02 мая 2010

Я пытаюсь запретить браузеру использовать :hover эффект CSS через JavaScript.

Я установил стили a и a:hover в своем CSS, потому что мне нужен эффект наведения, если JS недоступен. Но если JS доступен , я хочу перезаписать свой эффект наведения CSS более плавным (например, с помощью цветового плагина jQuery.)

Я пробовал это: 

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

Я тоже пробовал с return false;, но он не работает.

Вот пример моей проблемы: http://jsfiddle.net/4rEzz/. Ссылка должна просто исчезнуть, не поседев.

Как упомянул fudgey, обходной путь должен был бы сбросить стили наведения с помощью .css(), но мне пришлось бы перезаписать каждое отдельное свойство, указанное в CSS (см. Здесь: http://jsfiddle.net/raPeX/1/). Я ищу общее решение.

Кто-нибудь знает, как это сделать?

PS: я не хочу переписывать каждый стиль, который я установил для наведения.

Ответы [ 9 ]

131 голосов
/ 05 мая 2010

Боюсь, не существует универсального решения на чистом JavaScript. JavaScript не может отключить само состояние CSS :hover.

Вы можете попробовать следующий альтернативный способ. Если вы не возражаете немного покопаться в своих HTML и CSS, это избавит вас от необходимости сбрасывать каждое свойство CSS вручную через JavaScript.

HTML 

<body class="nojQuery">

CSS 

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

JavaScript 

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)
14 голосов
/ 24 сентября 2014

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

HTML 

 <a class="myclass myclass_hover" href="#">My anchor</a>

CSS 

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

Теперь вы можете использовать Jquery для удаления класса, например, если по элементу щелкнули:

Jquery 

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

Надеюсь, этот ответ полезен.

11 голосов
/ 05 мая 2010

Это похоже на ответ aSeptik, но как насчет этого подхода? Оберните код CSS, который вы хотите отключить, используя JavaScript в тегах <noscript>. Таким образом, если javaScript выключен, будет использоваться CSS :hover, в противном случае будет использоваться эффект JavaScript.

Пример: 

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>
11 голосов
/ 05 мая 2010

Вы можете управлять таблицами стилей и самими правилами таблиц стилей с помощью javascript 

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

Если сделать атрибуты важными и сделать это самым последним определением CSS, оно должно переопределить любое предыдущее определение, если только оно не является более целевым. Возможно, вам придется вставить больше правил в этом случае.

3 голосов
/ 04 июля 2017

Я бы рекомендовал заменить все :hover свойства на :active, когда вы обнаружите, что устройство поддерживает сенсорный ввод. Просто вызовите эту функцию, когда вы сделаете так: touch(). 

function touch() {
  if ('ontouchstart' in document.documentElement) {
    for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
      var sheet = document.styleSheets[sheetI];
      if (sheet.cssRules) {
        for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
          var rule = sheet.cssRules[ruleI];

          if (rule.selectorText) {
            rule.selectorText = rule.selectorText.replace(':hover', ':active');
          }
        }
      }
    }
  }
}
3 голосов
/ 02 мая 2010

Я бы использовал CSS, чтобы событие hover не изменило внешний вид ссылки. 

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

Этот простой CSS означает, что ссылки всегда будут черными и не подчеркнуты. Я не могу сказать из вопроса, является ли изменение внешнего вида единственным, что вы хотите контролировать.

2 голосов
/ 03 апреля 2016

Я использовал оператор not() CSS и функцию jQuery addClass(). Вот пример, когда вы нажимаете на элемент списка, он больше не будет зависать:

Например:

HTML 

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

CSS 

.vegies li:not(.no-hover):hover { color: blue; }

JQuery 

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});
1 голос
/ 12 ноября 2014

На самом деле другим способом решения этой проблемы может быть перезапись CSS с помощью insertRule.

Это дает возможность вставлять правила CSS в существующую / новую таблицу стилей. В моем конкретном примере это будет выглядеть так: 

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

Демонстрация с моим 4-летним оригинальным примером: http://jsfiddle.net/raPeX/21/

1 голос
/ 02 мая 2010

Попробуйте просто установить цвет ссылки: 

$("ul#mainFilter a").css('color','#000');

Изменить: или еще лучше, используйте CSS, как предложил Кристофер

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...