У меня небольшая проблема с script.
Я хочу иметь действие по умолчанию для :hover для клиентов с отключенным Javascript, но для тех, у кого включен Javascript, я хочу другое действие (фактически... такое же действие, но я хочу добавить небольшой эффект перехода).
Итак... Как я могу это сделать? Я использую jQuery.
Применить два класса к элементу relvant. один содержит поведение наведения, а один содержит все остальные стили.
Затем вы можете использовать jquery
$(element).removeClass('hover');
чтобы удалить класс с поведением, а затем применить все, что хотите, используя
$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
Как насчет того, чтобы скрыть :hover в таблице стилей, которая загружается только в том случае, если javascript отключен?
<noscript>
<link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>
Вот решение без классов взлома:
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);
}
);
Я думаю, что лучший подход заключается в том, чтобы оставить поведение :hover неприемлемым для пользователей, не являющихся javascript, а затем использовать JQuery для создания обработчиков событий mouseover и mouseout для создания другого эффекта для пользователей с поддержкой javascript.
Это очень старый вопрос, но я чувствую, что хочу сказать, что 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
}
Это более или менее такое же решение, как добавление тега наведения к разметке, но немного более надежное.
Я нашел ваше решение
В основном вы начинаете, переопределяя то, что вы сделали с помощью css hover. (естественно, вы сделали бы это, динамически вытаскивая информацию из стиля) затем сделайте все, что хотите в 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 при установке нового обработчика событий.
Добавьте класс в тег body 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
});
});
Вы можете удалить все правила стиля hover из document.styleSheets.
Просто просмотрите все стили CSS с помощью JavaScript и удалите все правила, которые содержат ": hover" в своем селекторе. Я использую этот метод, когда мне нужно удалить: hover styles из bootstrap 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
}