Webサイトを作成中ですが、cssの書き方で悩んでいます。コードですが、 .test ul li { float: left; display: block; padding: 20px; margin: 0px 22px 20px 0px; border : solid 1px #ccc; box-shadow: 3px 3px 5px #ccc; } .test ul li:active { margin: 2px 20px 18px 2px ; box-shadow:0px 0px 2px #fff; } 味噌汁ご飯焼き魚長々と書きましたが、疑似クラス :activeが効きません。ただ、IEだけです。Edge、Chrome、FireFoxでは、問題なく効きます。また、色々試しましたが、IEでも、要素の時だけで、のない文字や画像では問題ないようです。それに、上記のコードでは、要素のみ効かないだけで、要素の文字以外では効きます。要素が邪魔しているような感覚です。もちろん、IE以外のブラウザでは、要素も問題ありません。コードの書き方に問題あるのでしょうか？教えていだければ幸いです。よろしくお願い致します。

おしえて

疑似クラス :activeが効きません

解決済

質問者：chinmokumogura
質問日時：2018/05/09 12:06
回答数：1件

Webサイトを作成中ですが、cssの書き方で悩んでいます。

コードですが、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>

<style>
.test ul li {
float: left;
display: block;
padding: 20px;
margin: 0px 22px 20px 0px;
border : solid 1px #ccc;
box-shadow: 3px 3px 5px #ccc;
}

.test ul li:active {
margin: 2px 20px 18px 2px ;
box-shadow:0px 0px 2px #fff;
}
</style>
</head>

<body>
<diV class="test">
<ul>
<li>味噌汁</li>
<li><a href="#">ご飯</a></li>
<li><a href="#">焼き魚</a></li>
</ul>
</diV>
</body>
</html>

長々と書きましたが、疑似クラス :activeが効きません。
ただ、IEだけです。Edge、Chrome、FireFoxでは、問題なく効きます。
また、色々試しましたが、IEでも、<li>要素の時だけで、<li>のない文字や画像では問題ないようです。
それに、上記のコードでは、<a>要素のみ効かないだけで、<a>要素の文字以外では効きます。
<a>要素が邪魔しているような感覚です。
もちろん、IE以外のブラウザでは、<a>要素も問題ありません。
コードの書き方に問題あるのでしょうか？
教えていだければ幸いです。
よろしくお願い致します。

早速、ご回答頂き、誠にありがとうございました。
ご指示通り書き直しますと、きれいに動作しました。
助かりました。ありがとうございます。

申し上げにくいのですが、
実は、作成中のHTMLは少しだけ複雑になっています。
aタグ内に画像を添付する予定です。

たとえば、
<li><a href="#"><img src="" width="50">ご飯</a></li>

aタグ内にあるので、結果は同じだと思って、書きませんでした。
文字や枠内をクリックすると、「:active」は有効になりましたが、img画像をクリックしてもリンク先には飛びますが、activeが働きません。
自分なりに色々やってみましたが、何ともなりません。
やはり、IEだけの現象のようです。ちなみに、現在は、IEの11を使用しています。

説明足らずで誠に申し訳ありません。
もし、よろしければ、教えて頂けないでしょうか。

補足日時：2018/05/10 12:34
通報する
前回の補足の
「img画像をクリックしても、activeが働きません。」
という不具合ですが、再度、ネット検索してみると、対策が見つかりました。

.test ul li a img{
pointer-events: none;
}

を付け加えると期待通りの動きをしてくれました。
詳しくはわかりませんが・・

お騒がせしまして、申し訳ありませんでした。
これで、この件につきましたは、全て解決しました。
ありがとうございました。

補足日時：2018/05/11 15:18
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naokita
回答日時：2018/05/10 02:11

.test ul li { list-style:none;

float: left;
}
.test ul li.cell ,
.test ul li a {
display: block;
padding: 20px;
margin: 0px 22px 20px 0px;
border : solid 1px #ccc;
box-shadow: 3px 3px 5px #ccc;
}
* html .test ul li a { float:left;}
.test ul li.cell:active ,
.test ul li a:active {
margin: 2px 20px 18px 2px;
box-shadow:none;
}

<div class="test">
<ul>
<li class="cell">味噌汁</li>
<li><a href="#">ご飯</a></li>
<li><a href="#">焼き魚</a></li>
</ul>
<p style="clear:both;">IEと言っても各種バージョンがありますが、<br>
多分、liをクリックせず、aだけをクリックしただけと判斷しちゃうからでしょう・・・<br>
普通は、ボックス内のテキストアンカーをクリックし易いようにdisplay: block;にするから、このようなケースには気付かないんだけどね。</p>
</div>