Question

您好我正试图让“产品类别”菜单在此页面上运行：

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

页面加载时，CSS悬停用于设置背景位置，以便后面的图形产生翻转效果。

我将一些javascript设置为点击时滚动的背景位置，但这会击败CSS悬停：

onclick =“setStyle（'c1'，'backgroundPosition'，'0px 0px'）;

这意味着c1：悬停不再有效..我尝试在CSS c1中放置！重要：悬停背景位置并将其修复为Firefox而不是IE。

我怎么能用Javascript写一些东西呢：

onclick =“setStyle（'c1：hover'，'backgroundPosition'，' - 276px 0px'）;

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

Answer 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 - 内部 - 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，如果您在那里看到某些内容，请将该页面滚动到视图中。否则，将无法为您的某个子页面添加书签，也无法为中间点击新标签链接或类似内容。

Answer 2

前几天我做了类似的事情，不是百分百肯定，但这可能会帮助你朝着正确的方向发展..

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

Javascript敲出CSS：悬停？

2 个答案: