Question

我试图阻止浏览器通过JavaScript使用CSS的:hover效果。

我在CSS中设置了a和a:hover样式，因为如果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：我不想覆盖我为悬停设置的每种风格。

Answer 1

我担心没有纯粹的JavaScript通用解决方案。 JavaScript无法关闭CSS :hover状态。

您可以尝试以下替代解决方法。如果你不介意在你的HTML和CSS中乱搞，它可以节省你必须通过JavaScript手动重置每个CSS属性。

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

Answer 2

使用仅分配了悬停的第二个类：

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

希望这个答案有所帮助。

Answer 3

您可以使用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定义应覆盖任何先前的定义，除非更具体地定位。在这种情况下，您可能需要插入更多规则。

Answer 4

这与aSeptik的答案类似，但这种方法呢？使用<noscript>标记中的JavaScript包装要禁用的CSS代码。这样，如果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>

Answer 5

我会使用CSS来阻止：hover事件改变链接的外观。

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

这个简单的CSS意味着链接将始终为黑色而不加下划线。我无法从问题中看出外观上的变化是否是您想要控制的唯一内容。

Answer 6

我使用了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');
});

Answer 7

当您检测到设备支持触摸时，我建议将所有: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');
          }
        }
      }
    }
  }
}

Answer 8

尝试设置链接颜色：

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

编辑：或者更好的是，使用CSS，正如克里斯托弗建议的那样

Answer 9

实际上另一种解决方法可能是用insertRule覆盖CSS。

它提供了将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/

我可以通过JavaScript禁用CSS：悬停效果吗？

9 个答案:

HTML

CSS

的JavaScript