JavaScript、CSS、函数仅在 Internet Explorer 中不起作用答案

【问题标题】：JavaScript, CSS, function not working in Internet Explorer OnlyJavaScript、CSS、函数仅在 Internet Explorer 中不起作用
【发布时间】：2013-01-21 12:21:14
【问题描述】：

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

我有一个简单的 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;
            }

由于某种原因，它在 Firefox、Chrome、Safari 中都可以正常工作，除了 IE（从 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>

但由于某种原因，我无法为图像执行此操作。我只是无法将鼠标悬停在图像上。如果它在空白屏幕上它可以正常工作，但如果在图像上我无法让它工作。

可以解决并遇到与我相同的问题的人可以帮助我解决这个问题吗？

【问题讨论】：

“谷歌搜索后，我发现 .hover 操作对 IE 不起作用，因为悬停只需要链接标签。” 你很混淆两个那里有不同的东西。 CSS :hover 伪类仅适用于某些旧版本 IE 中的 a 元素。这与 jQuery 的 hover 函数无关，它适用于 jQuery 支持的所有浏览器。
重新检查您粘贴的代码，我什至没有在 chrome 中工作，一些图像" 保留没有任何属性并且缺少双引号。
你能提供一个小提琴链接吗？
我现在已经编辑了代码。小提琴给了我这个错误“SCRIPT5009：'$'未定义”试图找出错误是什么。
@T.J.克劳德。我实际上的意思是“它在 Firefox 中有效，但由于 IE 只允许链接具有 :hover 它不起作用。”

标签： jquery css internet-explorer hover jquery-events

【解决方案1】：

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

【讨论】：

你是对的让-乔治。我还必须在我的 JavaScript 中有一个适当的函数并调用正确的 id。现在我觉得这很简单，我把它复杂化了。
别忘了验证答案以关闭主题；）

【解决方案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;
 }

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

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

【讨论】：