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ですべて正常に動作します

<a>グーグルで調べたところ、ホバーはリンクタグのみを取得するため、IEでは.hoverアクションが正常に機能しないことがわかりました。.hover次に、すべての機能が正常に機能することを通知する修正（より多くの種類のプラグイン）を見つけましたが、何も起こりませんでした。

次に、コードを変更してCSSを含め、.hoverJavaScriptメソッドを使用しませんでした

CSSで

#show_div
{ position:absolute 
visibility: hidden
}

Javascriptでは、単純なshowandhideメソッドがありました。

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の可視性ルールに起因する可能性があります。古いバージョン、つまりバージョンでどのように処理されるかはわかりません。代わりに、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 に答える