首页 文章

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

提问于
浏览 次
91

我试图阻止浏览器通过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: I do not want to overwrite every style i have set for the hover.

javascript jquery css

9 回答

  • 1

    这与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>
    回复于
  • 12

    我担心没有纯粹的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');
)
    回复于
  • 3

    只是一个较短的答案......

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

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

    希望这个答案很有帮助 .

    回复于
  • 1

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

    回复于
  • 11

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

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

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

    回复于
  • 129

    我使用了 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');
});
    回复于
  • 2

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

    尝试设置链接颜色：

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

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

    回复于
  • 2

    实际上另一种解决方法可能是用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/

    回复于

相关问题