1

こんにちは、このページで製品カテゴリ メニューを機能させようとしています。

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

ページがロードされ、CSS ホバーが背景位置を設定するように機能するため、背後のグラフィックがロールオーバー効果を生み出します。

クリック時に背景位置をロールオーバーに設定するJavaScriptを配置しましたが、これによりCSSホバーがノックアウトされます。

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

これは、c1:hover が機能しなくなったことを意味します。CSS c1:hover の背景位置に !important を配置しようとしましたが、Firefox では修正されましたが、IE では修正されませんでした。

また、Javascriptで何かを書くにはどうすればよいですか：

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

......... Javascript はハイフンを使用しないことを知っています。たとえば、CSS で「background-position」を取得する方法は、ハイフンを捨てて「位置」位置をキャピトルにすることです。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そこに何かが表示された場合は、そのページをスクロールして表示する必要があります。そうしないと、サブページの 1 つをブックマークしたり、リンクを中クリックして新しいタブに移動したりすることができなくなります。

于 2010-04-22T14:12:46.260 に答える
0

私は先日似たようなことをしていました.100％確実ではありませんが、これはあなたを正しい方向に導くのに役立つかもしれません..

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