：IEのスパン上にホバーが表示されない

Internet Explorerのボタンタグの内側にあるスパンタグのホバーではCSSが機能しません。カーソルを置くとツールチップが表示されます。：IEのスパン上にホバーが表示されない

代わりの

.tooltiptextホバー：それは消えるはずツールチップは、それはIE FFとクロームで働いていないが、私は

.tooltipを使用する必要があることを知っていました。 tooltiptext：ホバー
.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 

 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 

 
.tooltiptext:hover { 
 
    display: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<body style="text-align:center;"> 
 

 
<div class="tooltip"> 
 
    <button type="button">Hover me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
    </button> 
 
</div> 
 
</body> 
 
</html>
提案がどのようなもの、私はあまりにもjqueryのを使用して開いています。ありがとう。

出典

2017-10-20 Hessam

IEのバージョン引き起こしている問題：

/* .tooltiptext:hover { display: none; } */

、あるいは簡単にはtitleプロパティを使用できますか？ – smekosh

私はIE 11でテストしています – Hessam

申し訳ありませんが、jQueryでのjQueryの動作に慣れていましたが、jQueryを使用する場合はをにする必要があります。私はTOOLTIPTEXTの可視性を調整するためのCSSの部分をコメントアウトしまし

$('.tooltip').mouseover(function() { 
 
    $('.tooltiptext').css('visibility', 'visible'); 
 
}); 
 

 
$('.tooltip').mouseout(function() { 
 
    $('.tooltiptext').css('visibility', 'hidden'); 
 
});

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 

 
/* .tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} */ 
 

 

 
/* .tooltiptext:hover { 
 
    display: none; 
 
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body style="text-align:center;"> 
 

 
    <div class="tooltip"> 
 
    <button type="button">Hover me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
    </button> 
 
    </div> 
 
</body>

注意。この方法で安全に削除できます。また、jQueryの実装は、ホバー効果を関数内に置くことを怠ったため、ちょっと混乱していることに注意してください。このスニペットは答えを表示しようとしています。がんばろう。何をやっていることは間違っている私の知識に

出典

2017-10-20 21:06:24

私はあなたが私の質問を理解していないと思う、あなたのコードが機能しない、私はあなたがツールチップ（私は "tooltiptext" .tooltip '）。mouseoutアクションはボタン上にあります。さもなければ、私のコードは前に働いて、ボタンをホバーして、ツールチップをホバーすると、IEの中で隠されているはずです。 – Hessam

：

「TOOLTIPTEXT」は「ツールチップ」の子要素である...

..soあなたが「TOOLTIPTEXT」あなたをホバリングしていますまた、 "ツールチップ"をホバリングしています。実際にはChromeでも動作していません。それだけでちらつきます。

「ツールチップ」をホバーすると「ツールチップ」と表示され、そこから離れたときに非表示になります。これを除去することにより、

：

<button type="button" title="Tooltip text">Hover me</button>

出典

2017-10-20 21:13:30 Federico

私は何らかの理由でタイトルを使いたくないのですが、複数のボタンが並んでいる場合は、カーソルを置くとツールチップが他のボタンの上に表示され、ユーザーはボタンから遠くに移動しなければなりません私は近づく必要がある。あなたはクロムとFFについて正しいですが、それはちょうどちらつきですが、私が必要とするのはそれだけです。 – Hessam

：IEのスパン上にホバーが表示されない

答えて

関連する問題