0

これは、私の jsp ページの基本構造です。

<div><span><span>   </span</span></div>

デフォルトでは、最も内側の span タグのコンテンツは非表示になっています。外側のスパン タグのコンテンツにカーソルを合わせると、最も内側のスパン タグのコンテンツが表示されます。これを IE8 で実行すると、内側のスパン タグが正常に非表示になりますが、外側のスパン タグにカーソルを合わせると、内側のスパン コンテンツが表示されません。

ただし、Firefoxで同じことを実行すると、魅力的に機能します。IE8 で動作させるにはどうすればよいですか?

これは、生成されたhtmlリンクで作成したjsfiddleリンクです

注: 外側のスパンを link(a) タグに変更すると、IE で動作します。しかし、スパンタグを使用する必要があります。

jspページ

<div id="tooltip1">
<span id="<%=i %>" class="content" 
                   onmouseover="this.style.color='#F50A16';showStopsInfoPopup('<%=stop %>', <%=i %>)" 
                   onmouseout="this.style.color='#050505'" 
                   onClick="search(this)" value=<%=stop %>>
    <%=stop %>
    <span id="stopsInfo<%=i%>">Hi</span>
</span>
</div>

CSS

#tooltip1 { position: relative; }
#tooltip1 span span { display: none; color: #FFFFFF; }    
#tooltip1 span:HOVER span {display: block; 
               position: absolute; 
               background-color: #aaa; 
               color: #FFFFFF; 
               padding: 5px; 
               height: 10px}

JavaScript 

function showStopsInfoPopup(stop, index){
    jQuery(function($) {
        $("#stopsInfo"+index).load("showStopsInfoPopup.do?stop="+stop);
    }); 
}
4

3 に答える 3

2

以下に示すように、これはjQueryを使用してはるかに簡単な方法で実行できると思います。

$(".content").on("mouseover", function(){
    $(this).find("span").show();
});

$(".content").on("mouseout", function(){
    $(this).find("span").hide();
});

HTML:

<div>
   <span class="content">
   <span id="stopsInfo<%=i%>">Hi</span>
   </span>
</div>
于 2012-10-31T17:07:43.140 に答える
2

:hover は、 a タグを除いて、古いブラウザーでは機能しません。span タグを使用する必要がある場合は、span と a の両方を追加する必要があります。これは、ほとんどのメニューが機能する方法です。

あなたの場合：

<div><a><span>default text <span>(hover text)</span></span></a></div>

そしてCSS：

a {text-decoration:none;}
a span span {display:none;}
a:hover span {display:inline;}

デモはこちら: http://jsfiddle.net/cV4qp/

別のオプションは、css の代わりに JavaScript を使用することです。

于 2012-10-31T17:09:59.267 に答える
1

その疑似セレクターは CSS3 でサポートされているため、それ以前はタグ専用です。タグが IE でも機能するのはそのためです。これをサポートするには、ハックと jquery を使用して簡単に実行できる IE ブラウザーの mouseover および mouseout イベントをアタッチする必要があります。

JSとcssに簡単な変更を加えただけでうまくいくはずです。

IE専用のJSとハック 

$(document).ready( function () { 
      $("#tooltip1 span.content").hover(
             function () { 
                      $(this).toggleClass("hover"); 
             });

});

CSS

#tooltip1 { position: relative; }
#tooltip1 span span { display: none; color: #FFFFFF; }    
#tooltip1 span:HOVER span { display: block; 
                            position: absolute; 
                            background-color: #aaa; 
                            color: #FFFFFF; 
                            padding: 5px; 
    height: 10px}
.hover
{
    color:red;
}

.hover span 
{
    display:inline;
    color: blue !important;
}
​

http://jsfiddle.net/7s4Np/7/

于 2012-10-31T17:07:08.350 に答える