Javascript 淘汰 CSS:hover？答案

【问题标题】：Javascript knocks out CSS:hover?Javascript 淘汰 CSS:hover？
【发布时间】：2011-02-11 01:49:12
【问题描述】：

您好，我正在尝试使产品类别菜单在此页面上工作：

http://www.jaybrand.co.uk/p1.html

在页面加载的那一刻，CSS悬停设置背景位置，使后面的图形产生翻转效果。

我放了一些 javascript 来将背景位置设置为点击时的翻转，但这会破坏 CSS 悬停：

onclick="setStyle('c1','backgroundPosition','0px 0px');

这意味着 c1:hover 不再有效.. 我尝试将 !important 放在 CSS c1:hover 背景位置，这在 Firefox 中修复了它，但在 IE 中没有。

我怎样才能用 Javascript 写一些东西来表达：

onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');

......... 我知道 Javascript 不使用连字符，例如在 CSS 中获得“背景位置”的方法是放弃连字符并制作“P”位置国会大厦。也许也可以做一些事情来获得 CSS 悬停属性？

【问题讨论】：

标签： javascript css hover rollover

【解决方案1】：

设置元素的style.backgroundPosition 时，与设置内联style="background-position: ..." 属性相同。由于内联样式属性会覆盖样式表规则，因此悬停/非悬停规则永远不会再次影响背景位置。

您可以删除未选择元素的backgroundPosition 规则，以便样式表规则可以通过。但实际上，您的代码需要认真重构：手动设置 onclick 中的每个背景位置是丑陋且不可维护的。

相反，切换一个类来标记选定的链接，例如。样式如下：

.c { background: url(...); }
#c1.selected, #c1:hover { background-position: -276px 0; }
#c2.selected, #c2:hover { background-position: -276px -61px; }
...

标记：

<h2><a class="c selected" id="c1" href="#productcats">Products</a></h2>
<a class="c" id="c2" href="#rice">Rice</a>
...

（a-inside-h2 因为反过来是无效的。）

脚本：

var selected= $('#c1');
$('.c').click(function() {
    // Move the 'selected' class to the new element
    //
    selected.removeClass('selected');
    selected= $(this);
    $(this).addClass('selected');

    // Scroll target element into view
    //
    var y= $(this.hash).offset().top-$('#slide').offset().top;
    $('#slide').animate({top: -y+'px'}, {duration: 450, queue: false});

    return false;
});

请注意，这使用链接的 href 来指向它们的去向，这将提高非可视浏览器的可访问性。您还应该添加一些代码来查看页面加载时的location.hash，如果您在那里看到某些内容，请将该页面滚动到视图中。否则，将无法为您的某个子页面添加书签，或者无法在链接中单击新标签或类似的内容。

【讨论】：

【解决方案2】：

前几天我也在做类似的事情，虽然不是 100% 肯定，但这可能会帮助你朝着正确的方向前进..

 onclick="document.getElementById('c1:hover').style.cssText='backgroundPosition: -276px 0px;';"

【讨论】：