JQuery – Dialog plugin

Recently I came across some crazy behavior on my jquery dialog popup. What happen was all my css “:hover” effects started going crazy. The behavior was when I hover over the button or text (which has :hover class), it started changing back and forth, hover <-> normal mode continuously as the mouse pointer moves over the control. But the same controls works fine when get displayed on the page directly. This issue is only occurring when displayed on the popup. And it affected to all browsers (FF, Chrome, Safari, IE9), some in different ways (IE: it was hiding the popup content when hover).

I went through the internet over this problem, but the solutions suggested didn’t work for me. Some of them are listed here in case for someone to be useful.

1. Add the “position” attribute as “relative”

2. Add the “background” attribute as a transparent repeated image or rgba(0,0,0,0)

None of the above worked for me. Although…

The Solution that worked for me

The body content for the popup was wrapped by a div element. Which have the “display” style attribute as “inline”. I changed it to “inline-block”, and yee…haaaaa… it started working.

Also note I have used “:hover” class in different elements(div, label, input) other than a “link/anchor”. Sometimes it may be related, but I don’t have any idea what went wrong with the use of “display” property to behave in such a crazy way. But I am relieved now.

Hope this will help someone.

Read more