###前提・実現したいこと
HTML、javascript、cssでIE11 Chrome FierFoxに対応したウェブページを作成しています。
テーブルのレコードをクリックすると、レコードの下にバルーンなどのメッセージを表示するふるまいを実装したいのですが、
Chrome では動くのにIE11では動かずに困っています。
###発生している問題
Chromeでテーブル<table><tr><td>表示
IE11だとAAA...自身も:activeが発火するだけで、「Click here」が表示されない
(子要素の<td>の:activeだけが発火して、その親要素の<td>の発火が見られない)
###該当のソースコード
html
1<!doctype html> 2<html ng-app> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" type="text/css" href="css.css"> 6</head> 7 <body> 8 <table> 9 <thead> 10 <tr> 11 <th>A</th><th>B</th><th>C</th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr class="dom1"> 16 <td class="dom2"> 17 AAAAAAAAA 18 <div class="balloon1">Click here</div> 19 </td> 20 <td class="dom2"> 21 BBBBBBBBB 22 </td> 23 <td class="dom2"> 24 CCCCCCCCC 25 </td> 26 </tr> 27 </tbody> 28 </table> 29 </body> 30</html>
css
1.dom1 2{ 3 background-color: green; 4 user-select: none; 5 -webkit-user-select: none; 6 -moz-user-select: none; 7 -ms-user-select: none; 8 cursor: pointer; 9 10} 11 12.balloon1 13{ 14 display: none; 15 position: absolute; 16} 17 18.dom1:active .balloon1{ 19 display: block; 20 background-color: yellow; 21} 22 23.dom2:active 24{ 25 background-color: black; 26}
###試したこと
.dom2にpointer-events: none;
.dom1にpointer-events: auto;
を追加しても、Chrome、IE11ともに動かなくなるだけで、解決できませんでした。
長文で失礼いたしますが、どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/26 05:22