私が使うすべてのdivに、内側の境界線を描画するためのセレクタを使用しています。さて、 ":after"疑似クラスはうまくいきませんでしたか?なぜこのセレクターが機能しないのでしょうか?私がちょうど:hover擬似クラスの作品を使用している場合は、両方のクラスを使いたいということです!なぜこの擬似クラスセレクタが機能していないのですか?
このEX
感謝を見てください!
例六
<p>Grade: A</p>
<p>thisis the thing</p>
<div class="w3c">
<div id="tab16">
<a href="#tab16">cars</a>
<div class="test">
<div><img alt="" src="http://placehold.it/176x106/" /></div>
</div>
</div> <!-- ends tab16 -->
<div id="tab17">
<a href="#tab17">othercars</a>
<div>
<div><img alt="" src="http://placehold.it/180x110/" /></div>
<div><img alt="" src="http://placehold.it/180x110/" /></div>
</div>
</div> <!-- ends # tabs17 -->
</div> <!-- ends .w3c -->
</body>
CSS ----あなたはコンテンツにそれを与えるとブロックとして、それを表示する必要が表示されるまで:after
擬似要素について
@charset "utf-8";
/* CSS Document */
.w3c { min-height: 250px; position: relative; width: 554px;}
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: #fff; background: #666666; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: #b0b0b0; /*-moz-linear-gradient(top, white, #eee); */}
.w3c > div:target > a { background: white; color: #b0b0b0; }
.w3c > div > div { background: white; z-index: 0; left: 0; top: 30px; bottom: 0; right: 0; padding: 10px; border: 1px solid #ccc; width: 596px; height: 133px;}
.w3c div div > div { border: 1px solid red; float: left; width: 180px; height:110px; margin-left: 10px; }
.w3c div div > div:hover:after{ border: 1px solid black; width:178px; height: 108px;}
/*.w3c > div > div > a > img:after{border: 2px solid black; width:178; height: 108px; }*/
.w3c > div:not(:target) > div { position: absolute; }
.w3c > div:target > div { position: absolute; z-index: 1; }
':after'は'、擬似要素である:hover'擬似クラスです。両方を一緒に使うことができます。 – BoltClock
ホバーで赤い枠線と黒い枠線の両方を表示しますか?もしそうなら、あなたはそれを達成することができます:事の後、しかし異なるCSS/HTMLコンボで – aletzo
@boltClockねえ!どのように色を使って正しい方法でコードを編集することができますか?私は私のポストでそれをやったのを見た。 :)ありがとう! – YoniGeek