当我鼠标悬停在div标签外面时，图标会闪烁

Question

这是视图的链接：http://jsfiddle.net/mQsWc/10/

我在值列中有文本字符串，这些是可编辑的项目。为了指示我在文本字符串后使用铅笔图标。 问题是如果我将鼠标移动到白色间隔区域（文本字符串的右侧），铅笔图标变得浮华（闪烁）。

Answer 1

相反

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

写

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

眨眼就会消失

编辑：

工作示例：http://jsfiddle.net/mQsWc/15/

希望这会有所帮助：）

Answer 2

这是没有眨眼的工作小提琴。

演示小提琴：http://jsfiddle.net/mQsWc/25/

Answer 3

我发送了两种修复bug的方法。我希望他们会帮助你。

http://jsfiddle.net/mQsWc/22/

http://jsfiddle.net/mQsWc/24/

Answer 4

这是因为你的div是透明的，指针命中目标在div和它的容器td之间交替。为避免这种情况，建议您将编辑功能和用户界面反馈与td关联，而不是div。

Answer 5

这将解决您的问题..它将消除闪烁效果

.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;
}

如亚历山大所建议的