0

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

我有一个简单的 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（从 5 及以上版本开始）之外，它在 Firefox、Chrome、Safari 中都可以正常工作

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

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

在 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>

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

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

4

2 回答 2

0

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

于 2013-02-06T13:30:44.530 回答
0

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

我的 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;
 }

天啊。最后它起作用了，到目前为止，我的客户还没有投诉。

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

于 2013-02-08T12:54:36.910 回答