将鼠标悬停在TEXTAREA或A对象上时会出现奇怪的CSS / JavaScript行为

Question

I have a strange problem in my web-app (php) that I noticed recently. 1 month ago it worked just fine.

When I hover above a certain < TEXTAREA > or over 2 buttons (add, exit), in a DIV, the DIV gets filled with its background color, making the INPUT, TEXTAREA and 2 buttons invisible.

This DIV is practically a window with 2 inputs and an OK and exit button, that I hide and show, as a "window" thing would be in Windows.

The moment I hover any other button in the page (so I do a mouseOver), the DIV shows up again, and it starts working the proper way.

So the problem is when i hover on the TEXTAREA and the 2 buttons, the DIV gets gray.

thanks!

i hope it's not a Chrome bug, in Firefox it seems to work, but again in Opera it doesn't. So strange.

Answer 1

took at look at your site in Chrome and was able to replicate your problem easily.

by using the "Element Inspector" i removed overflow:hidden from .my_links_header_container and could no longer replicate the problem.

i tested it several times by reloading the page.

on page load, the problem existed, but immediately. after i removed the overflow:hidden , it 100% did not occur again.

on a side note, you have an inline style="display:block" on your .add_link_table , which is not really a table element but a div . that's redundant because a div is a block element by nature -- perhaps it was a table element previously?

i also noticed several elements whose natural display was overridden by your CSS. i think part of this problem is related to flip-flopping your elements and displays.

Answer 2

Seems to be a webkit issue.

This may not be a good solution, but give it a try I am modifying you addLink method (use plain javascript or jquery selectors as you like, Ive kept the original code as it is)

function addLink()
{
 var addLinkTable = $("#add_link_table");
    if(document.getElementById('add_link_table').style.display=='block')
    {
        document.getElementById('add_link_table').style.display = 'none';
    }else{
        addLinkTable.css("visibility","hidden");
        document.getElementById('add_link_table').style.display ='block';
        setTimeout(showTable,10);
        function showTable(){
           addLinkTable.css("visibility","visible");
         }
    }
    document.getElementById('link_name').focus();
}

Try it out with by switching visibility or opacity or height