JavaScript淘汰了CSS：懸停了嗎？

Question

您好，我試圖在此頁面上使用“產品類別”菜單：

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 hover屬性？

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 -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在頁面加載時的location.hash ，如果在那里看到內容，則將該頁面滾動到視圖中。 否則，將無法為您的一個子頁面添加書簽，或者無法在中間單擊新標簽的鏈接或類似內容。

Answer 2

前幾天我在做類似的事情，但不是100％肯定，但這可能有助於您朝正確的方向前進。

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