【发布时间】：2022-03-31 23:55:29
【问题描述】：
我正在尝试使用 :after 选择器在我悬停的每个 div 中绘制一个内边框。现在 ":after" 伪类不起作用了？知道为什么这个选择器不起作用吗？如果我只使用 :hover 伪类，问题是我想同时使用这两个类！
看看这个EX
谢谢！
<body>
<h1>Example Six</h1>
<p>Grade: A</p>
<p>this is 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 .w3c -->
</body>
CSS：
@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是一个伪类。您可以同时使用两者。 -
悬停时是否要同时显示红色边框和黑色边框？如果是这样，您可以在没有 :after 的情况下实现它，但使用不同的 css/html 组合
-
@boltClock 嘿！想知道如何使用颜色等以正确的方式编辑代码？我看到你在我的帖子中做到了。 :) 谢谢！
-
我正在测试您的 JS Bin 中的代码，它似乎保存了您的代码而不是分叉它。哎呀。