IE10でツールチップが機能しない

画像の一部にツールチップを表示したい。私は、絶対的な位置付けで画像に目に見えないdivを置くこのテクニックを持っています。IE10でツールチップが機能しない

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
<meta http-equiv="X-UA-Compatible" content="IE=10" > 
</head> 

<body> 

    <div style="position:relative;"> 
     <img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/> 
     <div title="HELLO" style="position:absolute; width:100px; height:100px; top:0; left:0;"></div> 
    </div> 

</body> 

</html>

ただし、上にカーソルを置くとツールチップが表示されません。

何が間違っているのか分かりますか？この同じコードは、このコードは、エクスプローラ、クロム、FirefoxとエッジでOKのようです

出典

2017-07-07 omega

。 HTMLファイルにソースを貼り付けたときのように振る舞いますが、私がそのファイルを作成すると正しく動作します！それを調べることができます。 –

これはIE固有の機能によるもので、空の要素は完全に透明で、 'pointer-events：none'が設定されているのとほとんど同じです。イメージ上のdivの背景色と 'opacity：0'を設定すると、そのトリックを行う必要があります。 jsFiddleはIEの透明要素の動作を変更する可能性のあるいくつかのCSS正規化を使用します。 – Teemu

クロム59

おかげで動作します。 imgタグの動作がExplorerのdivタグとは異なります。おかしい

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Title of the document</title> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=10"> 
 
    </head> 
 
    <body> 
 
     <div style="position:relative;"> 
 
      <img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/> 
 
      <img style="position:absolute; width:100px; height:100px; top:0; left:0; border-width: 0px;" src="javascript:void(0)" title="Test" alt=""> 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-11-15 09:23:15

IE10でツールチップが機能しない

答えて

関連する問題