如何刪除：hover？
[英]How do I remove :hover?
問題描述
我有一個腳本的小問題。
對於禁用了 Javascript 的客戶端，我想在:hover上執行默認操作，但對於啟用了 Javascript 的客戶端，我想要另一個操作（實際上......相同的操作，但我想添加一個小的過渡效果）。
那么...我該怎么做？ 我正在使用 jQuery。
10 個解決方案
解決方案1
29 已采納 2009-01-12 19:23:31
將兩個類應用於relvant元素。 一個包含懸停行為，一個包含所有其他樣式。
然后，您可以使用jquery
$(element).removeClass('hover');
使用懸停行為刪除類的方法，然后應用您想要的任何內容
$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
解決方案2
17 2009-01-13 12:44:03
將:hover回退放在僅在javascript被禁用時加載的樣式表中怎么樣？
<noscript>
<link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>
解決方案3
12 2010-07-18 15:52:12
解決方案4
3 2009-01-12 19:23:48
我認為最好的方法是將:hover行為留作非javascript用戶的后備，然后使用JQuery創建mouseover和mouseout事件處理程序，為啟用javascript的用戶創建不同的效果。
解決方案5
2 2012-05-22 12:41:36
這是一個非常古老的問題，但我覺得要告訴那個modernizr提供了一種非常好的方法來實現這種后備。
只需在頭部包含modernizr，您就可以執行以下操作：
.no-js a:hover {
set background color and stuff like that
for cases when no javascript is present
}
另一方面，如果您想以另一種方式執行此操作，並且僅在存在js時設置css
.js a:hover {
set background color to default
and the text decoration
}
它與向標記添加懸停標記或多或少是相同的解決方案，但更加健壯。
解決方案6
1 2010-02-18 06:12:20
我找到了你的解決方案
基本上你是從重新定義你用css懸停所做的事情開始的。 （當然你會通過從樣式中動態提取信息來實現這一點）然后使用mouseover / mouseout事件在jquery中執行任何操作
這允許你在你的css中保留：hover事件，因為jquery將你的原始樣式綁定到元素。 實質上禁用了：懸停事件。
如果你的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();
})
解決方案7
0 2013-11-05 10:52:26
您可以從document.styleSheets中刪除所有：懸停樣式規則。
只需使用JavaScript瀏覽所有CSS樣式並刪除所有規則，這些規則在其選擇器中包含“：hover”。 我需要刪除時使用此方法：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++) {}
解決方案8
0 2010-02-18 08:39:34
您可以使用單個css規則在整個文檔中全局啟用行為，然后在安裝新事件處理程序時在javascript中的一個語句中禁用該規則。
在html body標簽中添加一個類：
<html>
<body class="use-hover">
...
你的css中的默認行為，讓我們說懸停時的粗體鏈接：
body.use-hover a:hover
font-weight: bold
在你的js中，運行時將刪除默認行為並執行其他操作：
$(function() {
$('body').removeClass('use-hover');
$('a').live('mouseover', function() {
// Do something when hovered
}).live('mouseout', function() {
// Do something after hover is lost
});
});
解決方案9
0 2017-12-28 08:03:02
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
}
解決方案10
0 2022-06-09 23:45:47
Mikael Lepistö 答案的香草 JS 版本
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
var rulesToLose = [];
for (var j = 0; j < sheet.cssRules.length; j++) {
var rule = sheet.cssRules[j];
if (rule && rule.selectorText && rule.selectorText.indexOf(':hover') >= 0) {
rulesToLose.push(j);
}
}
// Iterate backwards to prevent pointing to the wrong index while sheet rules get deleted
for (var k = rulesToLose.length - 1; k >= 0; k--) {
sheet.deleteRule(rulesToLose[k]);
}
}
如何在懸停時刪除 div？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.