3

私にはジレンマがあります。jQueryでクラス関数の追加と削除を使用する方法を学びましたが、クラスを追加しても既存のクラスが自動的に削除されません。私の問題はこれです。背景色を含むクラスを持つボタンがあります。そのボタンをホバーすると、古いクラスよりも新しいクラスが優先されるので、基本的には古いクラスを削除する必要があります。どこから始めればよいかわかりません。削除、追加、削除、追加しようとすると、ホバーは 1 回の呼び出しですべてを処理していないようです。誰かが私にアイデアを与えることができますか?

私は2つのクラスを持っています.1つは「.ul.nav a」と呼ばれ、もう1つは「.work.

$('ul.nav a').hover(
  function () {     
    $(this).addClass('work');
  },
  function () {
    $(this).removeClass('work');
  }
);

現在のクラスは次のとおりです。

ul.nav a {
  display: block;
  background-color:#B2B2D9;
  margin-right:2%;
  margin-bottom:5%;
  margin-left:1%;
  text-decoration:none;
  border:3px #e6e6e6 ridge;
  padding: 2%;
  border-radius: 15px;
}

どちらに変更したいですか

.work {
  color:white;
  background-color:red;
  position:absolute;
  top:100px;
  left 230px;
}
4

5 に答える 5

3

CSS を.workに変更ul.nav a.workして、より具体的にします。次に、古いスタイルをオーバーライドします。

于 2013-02-22T16:14:21.160 に答える
3

JS の代わりに CSS ':hover' セレクターを使用するアプローチを再考します。何かのようなもの

ul.nav a {
    background-color: blue;
}
ul.nav a:hover {
    background-color: red;
}
于 2013-02-22T16:14:36.233 に答える
1

これは、CSS の優先順位の問題です。CSS を次のように変更します。

ul.nav a.work {
    color:white;
    background-color:red;
    position:absolute;
    top:100px;
    left 230px;
}

または、これは単にホバーするためのものであるため、JavaScript を削除して CSS を次のように変更できます。

ul.nav a:hover {
    color:white;
    background-color:red;
    position:absolute;
    top:100px;
    left 230px;
}
于 2013-02-22T16:13:56.867 に答える
1

@Blazemonger が彼のコメントで示唆しているように、特異性と CSS カスケードが.workクラスの有効化を妨げています: .workCSS のセレクターを変更してul.nav a.work、確実に優先されるようにします。

于 2013-02-22T16:14:27.523 に答える
1

ベスト プラクティス: 可能であれば、スタイルを CSS で処理できるようにします。これを使用する代わりに.work：

ul.nav a:hover {
    color: white;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 230px;
}

また、javascript コードは必要ありません。

于 2013-02-22T16:16:56.930 に答える