1

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

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 悬停属性？

4

2 回答 2

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

于 2010-04-22T14:12:46.260 回答
0

前几天我也在做类似的事情，不是 100% 肯定，但这可能有助于推动你朝着正确的方向前进。

 onclick="document.getElementById('c1:hover').style.cssText='backgroundPosition: -276px 0px;';"
于 2010-04-22T13:22:13.263 回答