Чи можна відключити ефект CSS: наведення курсора через JavaScript?

99

Я намагаюся не допустити використання браузера :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: Я не хочу перезаписувати кожен стиль, який я встановив для наведення курсора.

javascript jquery css

— мео
джерело

136

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

Ви можете спробувати наступний альтернативний спосіб вирішення. Якщо ви не заперечуєте над тим, щоб трохи попрацювати у 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');
)

— Пол Д. Уейт
джерело

5

Мені подобається це рішення краще, ніж рішення noscript, оскільки це працює, коли CSS повністю міститься у зовнішніх файлах, і він також працює під час завантаження сторінки, якщо CSS завантажується спочатку, але JS не завантажується пізніше. Використання jQuery для "прогресивного вдосконалення" речей часто призводить до того, що сторінки не працюють добре, якщо ви натискаєте на матеріали, перш ніж закінчиться завантаження. Навіть із швидким браузером на швидкому посиланні я бачу це багато.

— Містер Блискучий та Новий 安宇

@Містер. Блискучі та нові: Я згоден, мені це подобається і краще, ніж моє рішення! Я не впевнений, чому раніше не помітив елегантності цього

— Джош

3

"Мені подобається це рішення краще, ніж рішення noscript, оскільки це працює, коли CSS повністю міститься у зовнішніх файлах" - так і <noscript>рішення. Ви просто помістіть <link>теги всередині себе <noscript>, а не <style>теги. Моє рішення дозволяє вам зберігати все в одному файлі таблиці стилів, а не декількох файлах.

— Пол Д. Уейт

це не зовсім те, що я шукав, але я думаю, що це рішення є найкращим компромісом! Thx для всіх вас

— meo

ви також можете скопіювати один і той же стиль з іншим іменем і, використовуючи jquery, виберіть усі елементи з цього класу та видаліть клас та замініть класом копіювання.

— chepe263

14

Використовуйте другий клас, якому призначено лише наведення курсора:

HTML

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

CSS

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

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

ПІДКЛЮЧЕННЯ

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

Сподіваюся, що ця відповідь корисна.

— Кай Ноак
джерело

3

плюс 1. це не ортодоксально, але зламає проблему досить піднесено.

— jim tollan

11

Ви можете керувати таблицями стилів та правилами стилів самими за допомогою 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 повинно перекрити будь-яке попереднє визначення, якщо тільки воно не є більш націленим. Можливо, у цьому випадку вам доведеться вставити більше правил.

— Стівен П
джерело

1

Або ви можете помістити всі правила носкрипту в одну таблицю стилів, а потім вимкнути таблицю стилів з JavaScript.

— Шон Хоган

2

Або помістіть свій <link>тег таблиць стилів noscript всередину <noscript>елемента? Це б спрацювало, правда?

— Пол Д. Уейт

1

Або видаліть правило "ображаючого": developer.mozilla.org/en/DOM/stylesheet.deleteRule

— RoToRa

1

Навіть IE5 може це зробити. Цей метод називається по-іншому, але він повинен працювати: msdn.microsoft.com/en-us/library/ms531195%28v=vs.85%29.aspx . Я не перевіряв інші браузери, але я б припустив, що всі сучасні браузери впроваджують стандарт.

— RoToRa

У Firefox я потрапляюError: The operation is insecure.

— Alex W

11

Це схоже на відповідь aSeptik, але як бути з цим підходом? Оберніть CSS-код, який ви хочете відключити, використовуючи JavaScript у <noscript>тегах. Таким чином, якщо javaScript вимкнено, :hoverбуде використовуватися CSS , інакше буде використаний ефект 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>

— Джош
джерело

4

Я використав not()оператор CSS та addClass()функцію jQuery . Ось приклад, коли ви натискаєте на елемент списку, він більше не наближатиметься:

Наприклад:

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');
});

— ColdTuna
джерело

3

Я б використовував CSS, щоб запобігти зміні зовнішнього вигляду посилання: наведіть курсор.

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

Цей простий CSS означає, що посилання завжди будуть чорними та не підкресленими. Я не можу сказати з питання, чи зміна зовнішності - це єдине, що потрібно контролювати.

— Крістофер Альтман
джерело

добре, що є ефект: наведення курсора, якщо JS недоступний для клієнта. Але якщо він є, мені потрібно його перезаписати. Я встановив: клас наведення курсора в моєму css, просто хочу відключити його.

— meo

@meo: Ви не можете відключити класи CSS psuedo, але ви можете їх замінити, встановивши всі стилі посилань на однаковий вигляд / параметри. І ця відповідь, і моя відповідь роблять це, просто по-різному.

— Мотті

3

Рекомендую замінити всі :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');
          }
        }
      }
    }
  }
}

— Шобхіт Шарма
джерело

Для мене чудово працює. Дякую!

— Інверсія

1

Спробуйте просто встановити колір посилання:

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

Редагувати: або ще краще використовувати CSS, як запропонував Крістофер

— Мотті
джерело

jsfiddle.net/raPeX Я зробив приклад. Це працює, але це нерозумно це робити. мені доведеться отримати кожне значення CSS і додати їх як стиль? Має бути кращий спосіб. Я не хочу цього робити. але +1 для підказки

— meo

Привіт Мео, ні, ні, мій код вище був націлений на конкретне посилання, тому що я вважав, що ви хочете. Ви можете більше узагальнити, просто використовуючи aзамість цього, ul#mainFilter aякщо це саме ви маєте на увазі, або ви говорите, що кожне посилання на сторінці має інший колір?

— Мотті

Я оновив вашу демонстрацію, з коментарями, щоб показати вам, що я маю на увазі: jsfiddle.net/raPeX/2

— Mottie

я отримав це вже дякую. Але проблема полягає в тому, що на моєму курсорі змінюється не тільки колір, іноді це його фон, межа, іноді навіть висота лінії. Ось чому мені було б легше просто запобігти наведенню, переписати кожен ефект наведення.

— meo

Частковий патч для цієї ідеї: Ви можете створити css правило, яке вибирає для a.jsOverride:hoverцього перекриття всіх характеристик css, тому js повинен був просто додати цей jsOverrideклас до всіх посилань, коли сторінка завантажується ...

— grossvogel

1

Насправді іншим способом вирішити це може бути перезапис 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
);

Демо з оригінальним прикладом мого чотирьох років: http://jsfiddle.net/raPeX/21/

— мео
джерело