0

この質問を見た後、反対のことをする方法を考えています。

作成するボタンのメイン クラスが既にあります。ボタンごとに、 を介して異なる背景を設定しますmyButton.style.backgroundImage。しかし、私が持っている異なるボタンごとに :hover の個々の背景も設定する必要があります。

特定の背景を追加するために Javascript を介して :hover 疑似クラスにアクセスするにはどうすればよいですか?

前もって感謝します

4

3 に答える 3

0

背景画像の設定には使用せずmyButton.style.backgroundImage、代わりに各ボタンに個別のクラスを追加します。たとえば、firstButton.className += ' first-button'

次に、CSSの各ボタンの両方の状態のスタイルを設定できます。

.first-button {
    background-image: url('first.png');
}  
.first-button:hover {
    background-image: url('first_hovered.png');
}
于 2012-12-04T13:59:29.003 に答える
0

疑似クラスの CSS を追加する (例: JS で document.write する) か、Javascript イベントを使用してホバー時に backgroundImage を設定する (mouseenter/mouseleave) ことができます。残念ながら、疑似クラスは自動的に呼び出され、スタイルを変更するために手動で「アクティブ化」したり、「アクセス」したりする方法はありません。

于 2012-12-04T13:48:34.293 に答える
-1

:hover 疑似クラスは CSS の機能です。

したがって、スタイルシートに追加できます。

.myButtonClass1:hover {background: red;}
.myButtonClass2:hover {background: blue;}

または、jQueryが利用可能であると仮定して本当にjavascriptを使用したい場合は、使用できます

$(".myButtonClass1").hover(
  function () {
    $(this).css("background", "red");
  },
  function () {
    $(this).css("background", "none");
  }
);

$(".myButtonClass2").hover(
  function () {
    $(this).css("background", "blue");
  },
  function () {
    $(this).css("background", "none");
  }
);
于 2012-12-04T13:51:32.017 に答える