1

Jquery経由で追加されるいくつかの要素があります:

$('body').delegate('.tutorial_links', 'click', function(){
        var $tutorial_hider="<a href='#' class='hider_tutorial' data-method='delete' data-remote='true' rel='nofollow' style='display:inline-block; background-color:#68d574;  width:"
        $width=$(this).parent().width()
        $tutorial_hider=$tutorial_hider+$width+"px'></a>"
        $(this).css('display', 'none');
        $(this).before($($tutorial_hider));
    })

相対CSSを持つもの：

.hider_tutorial{
    height: 15px;
    vertical-align: -1px;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    padding-top: 0;
}

.hider_tutorial:hover{
 background-color: rgba(214, 19, 84, 0.70);
}

そして、動作する CSS だけの場合hider_tutorial、ブラウザーは表示されません .hider_tutorial:hover(Chrome または Firefox で要素を検査すると、. については何もありません.hider_tutorial:hover)。

4

2 に答える 2

0

インライン スタイルは、他のすべての CSS ルールよりも優先されます。つまりbackground-color:#68d574、 属性で定義されたプロパティは、またはstyleのプロパティよりも優先度が高くなります。このフィドルをチェックして、両方のリンクにカーソルを合わせてください。最初のリンクは期待どおりに背景色を変更しますが、2 番目のリンクは常にオーバーライドされた色になります。.hider_tutorial.hider_tutorial:hover

これを回避するには、いくつかの方法があります。

  • スタイルを手動で適用する代わりに、クラスを使用します。これにより、「通常の」優先ルールが確実に適用され (優先されるインライン スタイルがないため)、よりクリーンなコードが作成されます (CSS および JavaScript コード全体に散在するのではなく、すべてのスタイルが CSS ファイルに含まれます)。
  • でbackground-colorプロパティを.hider_tutorial:hover重要にし!importantます。!importantプロパティをオーバーライドする必要が生じた場合、遅かれ早かれ裏目に出る可能性があるため、これは私の本ではより汚い修正です!important。
于 2013-06-19T19:27:39.093 に答える
0
  1. 開発者コンソールを開く
  2. 要素をクリックします
  3. 右側のパネルで囲まれた矢印のドットをクリックします - >要素の状態を切り替えます

スクリーンショット: http://imgur.com/7ErrNTF

于 2013-06-19T19:22:16.980 に答える