html - divタグアイコンの外側にマウスを合わせると点滅します

Question

これは表示用のリンクです: http://jsfiddle.net/mQsWc/10/

値の列にテキスト文字列があり、これらは編集可能なアイテムです。表示のために、テキスト文字列の後に鉛筆アイコンを使用しました。問題は、空白の領域（テキスト文字列の右側）でマウスを動かすと、鉛筆のアイコンが派手になる（点滅する）ことです。

score 2 · Accepted Answer

その代わり

<div class="ghostPencil">some number</div>

書く

<span class="ghostPencil">some number</span>

そして点滅は消えます

編集：

お役に立てれば：）

score 1 · Accepted Answer

これがまばたきのない作業フィドルです。

デモフィドル： http： //jsfiddle.net/mQsWc/25/

score 1 · Accepted Answer

バグを修正するための 2 つの方法を送信します。彼らがあなたを助けることを願っています。

score 0 · Accepted Answer

これdivは、が透過的であり、ポインタヒットターゲットが div とその container の間で交互になるためtdです。これを避けるために、編集機能と UI フィードバックをtdではなくに関連付けることをお勧めしますdiv。

score 0 · Accepted Answer

これで問題が解決します..点滅効果が削除されます

.ghostPencil {
       width:100%;
    }

編集

または、ホバー時に鉛筆を表示したい場合はtd、.ghostPencil の親 td に .parent と仮定して次のコードを使用するクラスを指定します。

.parent:hover .ghostpencil{
        background:url("icon_pencil.png") no-repeat right; 
    padding-right:15px;
    cursor:pointer;
    float:left;
}

アレクサンダーが提案したように

5 に答える 5