質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Q&A

解決済

2回答

5983閲覧

ブラウザIE11において、<tr>タグのcss疑似クラス「:active」が発火しない

yasunawa

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

0グッド

0クリップ

投稿2017/02/10 18:13

###前提・実現したいこと
HTML、javascript、cssでIE11 Chrome FierFoxに対応したウェブページを作成しています。
テーブルのレコードをクリックすると、レコードの下にバルーンなどのメッセージを表示するふるまいを実装したいのですが、
Chrome では動くのにIE11では動かずに困っています。

###発生している問題
Chromeでテーブル<table><tr><td>表示
イメージ説明

<td>のAAA....をクリックすると、 :activeが発火して「Click here」が表示される、 AAA...自身も:activeが発火して黒くなる (BBB...、CCC...でも同じように表示される) ![イメージ説明](aa5540a3399883214a2b1ca331a6855f.jpeg)

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ともに動かなくなるだけで、解決できませんでした。

長文で失礼いたしますが、どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

仕様です。

【CSS :active selector doesn't work if the element has nested elements in IE11 | Microsoft Connect】
https://connect.microsoft.com/IE/feedback/details/1473482/css-active-selector-doesnt-work-if-the-element-has-nested-elements-in-ie11

【アイコン+文字セットのボタンのactive擬似クラスをIEで作動させる - ワシはワシが育てる】
http://washiiku.hatenablog.com/entry/2013/11/10/035706

投稿2017/02/10 18:23

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasunawa

2017/02/26 05:22

connect.microsoft.comにbugとありますね。。。 CSSのactiveによる実装ではなく、jsでイベント処理を実装するとできました。 ありがとうございます。
guest

0

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.dom2:active 19{ 20 background-color: black; 21} 22 23.dom2:active .balloon1{ 24 display: block; 25 background-color: yellow; 26}

普通に設定するならこうなりそうです。

投稿2017/02/11 15:29

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasunawa

2017/02/26 05:24

CSSだとブラウザによる違いがどこまで出るかわからないので、バルーン処理についてはjsで実装することにしました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問