Как удалить: hover?
У меня небольшая проблема со скриптом.
Я хочу иметь действие по умолчанию на :hover для клиентов с отключенным Javascript, но для тех, у кого включен Javascript, мне нужно другое действие (фактически ... такое же действие, но я хочу добавить небольшой эффект перехода).
Итак ... Как я могу это сделать? Я использую jQuery.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 9
Примените два класса к относящемуся элементу. один содержит поведение при наведении, а другой - все остальные стили.
Затем вы можете использовать jquery
$(element).removeClass('hover');
метод, чтобы удалить класс с поведением наведения, а затем применить все, что вы хотите, используя
$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
Мне нужно изменить код, чтобы добиться этого. Но ... думаю, обратный тоже подойдет: добавьте класс: D 10x (только что появился огромный луч света над моей головой!)
Я думаю, что лучшим подходом было бы оставить поведение :hover как запасной вариант для пользователей, не использующих javascript, а затем использовать JQuery для создания обработчиков событий mouseover и mouseout, чтобы создать другой эффект для пользователей с поддержкой javascript.
Библиотека JQuery Javascript - События / наведение курсора мыши
Как насчет того, чтобы поместить запасной вариант :hover в таблицу стилей, которая загружается только при отключенном JavaScript?
<noscript>
<link href = "noscript.css" rel = "stylesheet" type = "text/css" />
</noscript>
Отличный ответ ... Я бы выбрал это.
Хорошая, но недействительная разметка XHTML. Тег <link> должен быть в head, тег <noscript> должен быть в body. Начиная с HTML5, noscript разрешен в head, поэтому разметка является допустимой HTML5 и может не быть проблемой.
Я НАШЕЛ ВАШЕ РЕШЕНИЕ
в основном вы начинаете с переопределения того, что вы делали при наведении курсора CSS. (естественно, вы сделаете это, динамически извлекая информацию из стиля) затем делайте все, что хотите, в jquery с событиями mouseover / mouseout
это позволяет вам сохранить событие: hover в вашем CSS, потому что jquery привязывает ваши исходные стили к элементу. По сути, отключение события: hover.
если ваш css:
a.class {
background-color: #000000;
background-position: 0 0;
}
a.class:hover {
background-color: #ffffff;
background-position: 100% -50px;
}
ваш jquery будет примерно таким:
jQuery("a.class").each(function () {
var oldBackgroundColor = jQuery(this).css("backgroundColor");
var oldBackgroundPosition = jQuery(this).css("backgroundPosition");
jQuery(".class").css({
'backgroundColor':oldBackgroundColor,
'backgroundPosition':oldBackgroundPosition
});
})
.bind("mouseover", function() {
doSomething();
})
.bind("mouseout", function() {
doSomething();
})
Вы можете глобально включить поведение для всего документа с помощью одного правила CSS, а затем отключить это правило в одном операторе в javascript при установке нового обработчика событий.
Добавьте класс в свой тег тела html:
<html>
<body class = "use-hover">
...
Поведение по умолчанию в вашем CSS, скажем, жирные ссылки при наведении:
body.use-hover a:hover
font-weight: bold
И в вашем js, когда run удалит поведение по умолчанию и сделает что-то еще:
$(function() {
$('body').removeClass('use-hover');
$('a').live('mouseover', function() {
// Do something when hovered
}).live('mouseout', function() {
// Do something after hover is lost
});
});
Вот решение без хак-классов:
CSS:
a {color: blue;}
a:hover {color: red;}
jQuery (использует jQueryUI для анимации цвета):
$('a').hover(
function() {
$(this)
.css('color','blue')
.animate({'color': 'red'}, 400);
},
function() {
$(this)
.animate({'color': 'blue'}, 400);
}
);
На самом деле мне больше всего нравится этот ответ. Это единственный ответ, который решает проблему, используя только javascript. Спасибо, Kingjeffrey!
Это очень старый вопрос, но мне хочется сказать, что modernizr предоставляет очень хороший способ реализовать подобные запасные варианты.
Просто включите modernizr в голове, и вы сможете сделать следующее:
.no-js a:hover {
set background color and stuff like that
for cases when no javascript is present
}
С другой стороны, если вы хотите сделать это по-другому и установить css только тогда, когда присутствует js
.js a:hover {
set background color to default
and the text decoration
}
Это более или менее то же решение, что и добавление тега зависания к разметке, но немного более надежное.
Вы можете удалить все правила стиля: hover из document.styleSheets.
Просто просмотрите все стили CSS с помощью JavaScript и удалите все правила, которые содержат ": hover" в своем селекторе. Я использую этот метод, когда мне нужно удалить стили: hover из начальной загрузки 2.
_.each(document.styleSheets, function (sheet) {
var rulesToLoose = [];
_.each(sheet.cssRules, function (rule, index) {
if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) {
rulesToLoose.push(index);
}
});
_.each(rulesToLoose.reverse(), function (index) {
if (sheet.deleteRule) {
sheet.deleteRule(index);
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
});
});
Я использовал подчеркивание для итерации массивов, но можно было написать и их с чистым циклом js:
for (var i = 0; i < document.styleSheets.length; i++) {}
You can redraw element after click
function redraw(element) {
if (!element) { return; }
let n = document.createTextNode(' ');
let disp = element.style.display; // don't worry about previous display style
element.appendChild(n);
element.style.display = 'none';
setTimeout(function(){
element.style.display = disp;
n.parentNode.removeChild(n);
}, 100); // you can play with this timeout to make it as short as possible
}
да, но этот метод очень навязчивый :( Я хочу, чтобы что-то не было таким навязчивым: -s