0

次のコードがあります。要素の上にカーソルを置くと、div が表示され、マウスアウトで非表示になります。これは、IE を除くすべてのブラウザーで正常に動作します。これが私のコードです。

// JavaScript Document

var baseopacity=0
function showtext(thetext){
    if (!document.getElementById)
    return
    textcontainerobj=document.getElementById("tabledescription")
    browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
    instantset(baseopacity)
    document.getElementById("tabledescription").innerHTML=thetext
    highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
    cleartimer()
    instantset(baseopacity)
}

function instantset(degree){
    if (browserdetect=="mozilla")
        textcontainerobj.style.MozOpacity=degree/100
    else if (browserdetect=="ie")
        textcontainerobj.filters.alpha.opacity=degree
    else if (document.getElementById && baseopacity==0)
        document.getElementById("tabledescription").innerHTML=""
}
function cleartimer(){
    if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
        cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
        cur2.filters.alpha.opacity+=20
    else if (window.highlighting)
        clearInterval(highlighting)
}
//<![CDATA[ 
$(window).load(function(){
    $(".tiptext").mouseover(function() {
        $(this).children(".description").show();
    }).mouseout(function() {
        $(this).children(".description").hide();
    });
});//]]>

要素の 1 つの HTML を次に示します (各要素は画像です)。

<div id="one">
<div class="tiptext"><a href="http://mathremake.site40.net/"><img src="../images/web/1.png" height="180" width="300"/></a>
<div class="description"><font face="Arial, Helvetica, sans-serif"><u>Ascension Math Page</u></font><font size="2" face="Arial, Helvetica, sans-serif"><br>Ascension Collegiate's Mathematics department web page.</br></font></div>
</div>
</div>

そして、同じ要素の CSS。

#one {
    top: 200px;
    position: absolute;
    width: 300px;
    position: absolute;
    left: 50%; 
    margin-left: -500px;
    }

すべての助けに感謝します、ありがとう。:)

4

2 に答える 2

2

IE に問題が$(window).load()あります。これを試すことができます。

$(window).bind('load', function(){
     ...
});

また：

$(document).ready(function() {
   $(".tiptext").hover(function() {
      $(this).find(".description").show();
   }, function() {
      $(this).find(".description").hide();
   });
});
于 2012-07-01T01:57:46.920 に答える
0

ドキュメントの準備を試すことができます。また、物事を簡単にする.hover()関数を使用することもできます。また、display:nonecss プロパティをクラスに追加.descriptionするか、新しい.hideクラスを作成して追加することをお勧めします。

Javascript

  $(function(){
     $(".tiptext").hover(function() {
         $(".description").show();
     },function() {
         $(".description").hide();
     });
  });​

CSS:

  .description{
     display:none;
  }

解決

于 2012-07-01T02:08:50.533 に答える