JavaScript、CSS、功能仅在 Internet Explorer 中不起作用

Question

我知道这个问题之前已经被问过一百万次，但由于某种原因，我仍然无法找到解决该问题的方法。

我有一个简单的 JavaScript 函数

   //Robert Lindsay
            $(document).ready(function () {
                $("#robertLindsay").hover(function () {
                    $("#robertLindsay div").css("visibility", "visible");
                },
      function () {
          $("#robertLindsay div").css("visibility", "hidden");
      });
            });

在我的身体里我这样称呼它

   <div style="margin-bottom: 51px">
        <div style="position: relative; float: left">
            <img alt="" class="style2" src="../Styles/12%20-%20065BHFgroup070.JPG" />                
            <div style="position: absolute; top: 5px; left: 150px; width: 131px;">
                <div id='robertLindsay'>
                    <div id="boxRobert" style="visibility: hidden; height: 127px; width: 150px;">
                        <center>
                            <a href="#">Dr. Robert Lindsay</a></center>
                    </div>
                </div>
            </div>
            </div>
     </div>

CSS很简单：

 .style2
            {
                width: 650px;
                height: 410px;
            }

出于某种原因，除了 IE 之外，在 Firefox、Chrome、Safari 中一切正常（从 5 及以上开始）

在谷歌搜索之后，我发现 .hover 操作对 IE 不起作用，因为悬停只需要链接<a>标签。 然后我找到了一个修复程序（更像是一个插件），它告诉你所有的.hover函数都可以正常工作，但什么也没发生。

然后我更改了我的代码以包含一些 CSS 并且不使用.hover JavaScript 方法

在 CSS 中

#show_div
{ position:absolute 
visibility: hidden
}

在 Javascript 中，我有一个简单的显示和隐藏方法：

document.getElementById("div1").show();

else 
document.getElementById("div1").hide();

在我的身体里：

<div style="position:absolute" onmouseover="div1" onmouseout="div1">
Show the piece of text or div here

</div>

但由于某种原因，我无法为图像做到这一点。 我只是无法将鼠标悬停在图像上。 如果它在空白屏幕上，它工作正常，但如果在图像上，我就无法让它工作。

修复并遇到与我一样问题的人可以帮助我解决这个问题吗？

Answer 1

问题可能来自 css 可见性规则，我不确定旧的 ie 版本是如何处理的。 尝试设置 display:none/display:block 代替。

Answer 2

我想我终于能够让事情正常工作（“现在所有浏览器都支持这个”）

我的 JavaScript 函数是

 function showlayer(layer) {
  var myLayer = document.getElementById(layer).style.display;
  if (myLayer == "none") {
   document.getElementById(layer).style.display = "block";
   } else {
   document.getElementById(layer).style.display = "none";
    }
 }

在我的 Html 正文中，我调用了这样的东西

<img alt="" class="style2" src="../Images/whateverImange.JPG" usemap="#groupmap" />
<div id="myName" style="position: absolute; top: 500px; left: 450px; width: 225px; height: 50px; display: none;">
    <a href="http://news.google.co.uk/nwshp?hl=en&tab=wn">Show me Now and click me later</a>
</div>
<map name="groupmap">
    <area shape="circle" coords="100,100,50,100" href="https://play.google.com/store?hl=en&tab=n8" alt="" onmouseover="showlayer('myName');" />
</map>

我的 CSS 是这样的

.style2
 {
 width: 650px;
 height: 410px;
 position: relative;
 float: left;
 }

天啊。 终于成功了，到目前为止，我的客户还没有投诉。

我总是鼓励获得更多建议，因为像我这样的新手可以学到很多东西。