2012-01-28 7 views
0

私は、カーソルがカーソルの上にあるときに表示したいスパンを持っています。私が期待しているものを見るには、 "href"属性を削除して、IE以外のブラウザで試してみてください。IE quirksモードa:ホバースタイルの問題

<!-- <!DOCTYPE html> --> 
<html> 

<head> 
    <style> 
     .container { 
      color: orange; 
     } 
     a.anchor { 
      text-decoration:none; 
      display: inline-block; 
      cursor: default; 
     } 
     a.anchor:hover span { 
      visibility: visible; 
     } 
     a.anchor span { 
      visibility: hidden; 
     }  
    </style> 
</head> 

<body> 
    <div class="container"> 
     <a class="anchor" href="#"> 
      <span>XXXXXXXXX</span> 
     </a> 
    </div> 
</body> 

</html> 

doctypeは、IEをquirksモードにするためにコメントアウトされています。このモードでは、アンカーに「href」属性が含まれていない限り、IE a:hoverはリストされたCSS(視認性チェンジャー)で機能しません。

しかし、「href」を追加すると、ブラウザのデフォルトのアンカースタイルでIEのスパンのスタイルが上書きされます。私のアプリでは、コンテナのdivのは難しいアンカーのスタイルをオーバーオーバー書きになってダイナミックなスタイルを持っている可能性が...

だから私の質問は以下のとおりです。

1)私はQuirksモードで動作することができます。とにかく、私はhref属性を使わずに:ホバーの振る舞いを私が望んでいたやり方にすることができますか?

2)前の質問に対する回答が「いいえ」の場合、ブラウザのデフォルトアンカースタイルをすべて削除するにはどうすればよいでしょうか?

私は本当にこのためのスクリプトを書いていないと思っていますが、スクリプトの解決策がある場合はお知らせください!

ありがとうございます。

+1

'button.onMouseOver =関数(){のdocument.getElementById( "thespan")style.display = 'インライン'。 }; button.onMouseOut = function(){document.getElementById( "thespan")。style.display = 'none'; }; ' – Tim

+0

href属性のないアンカーとは何ですか?通常、表示されていないページ(ID付き)の場所をマークするためにのみ行います。 – animuson

+0

'a'タグにname属性を追加してみてください。 HTML4では、タグはhref属性またはname属性のいずれかを持つ必要があります。したがって、必要な属性を追加するまで、 'a'が実際に通常の' div'として表示されているとしか推測できません。 あなたのスタイルに '!important'を追加して、これがデフォルトを上書きするのに十分かどうかを確認してください。 – lpd

答えて

0

試し

a.anchor:hover span { 
     display: inline-block; 
    } 
    a.anchor span { 
     display: none; 
    } 

は、例えば含まhttp://jsfiddle.net/gHKsY/4/

+0

これは私が必要とするものではありません。アンカーは、カーソルが上になければ完全に非表示にする必要があります。 – Viele

+0

これは問題ありません。アンカーで背景を透明に設定するだけです:} –

+0

テストできるように、色を使用しました。 –