CODEWITHSUNDEEP
htmlcss
Omm
Omm

Reputation: 1735

When I mouse over on out side of div tag icon is getting blinking

This is the link for view : http://jsfiddle.net/mQsWc/10/

I have a text strings in value column these are editable items. For indication I used pencil icon after text string. Problem is if I move mouse around white spaced area(right side of the text string), pencil icon getting flashy(blinking).

Upvotes: 2

Views: 934

Answers (5)

SVS
SVS

Reputation: 4275

Here is the working fiddle without blinking.

Demo Fiddle: http://jsfiddle.net/mQsWc/25/

Upvotes: 1

Pavan Kumar
Pavan Kumar

Reputation: 1686

I'm sending two methods for fix the bug. I hope they will help you.

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

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

Upvotes: 1

madeye
madeye

Reputation: 1406

Instead 

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

Write 

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

And the blinking will go away

Edit:

Working example: http://jsfiddle.net/mQsWc/15/

Hope this helps :)

Upvotes: 2

Uttara
Uttara

Reputation: 2532

This will solve your problem.. it will remove the blinking effect

.ghostPencil {
       width:100%;
    }

edit

Or if u want the pencil to appear on hover of td then give the parent td of .ghostPencil a class suppose .parent and use the following code

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

as suggested by Alexander

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

It's because your divs are transparent, and the pointer hit target alternates between the div and its container td. To avoid this, I suggest that you associate the editing capabilities and the UI feedback with td rather than div.

Upvotes: 0

Related Questions