我正在尝试使用 :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 伪元素，您需要为其提供内容并将其显示为 block 。
然后，绝对定位 :after 并相对定位 div 本身:
.w3c div div > div {
position: relative;
border: 1px solid red;
float: left;
width: 180px;
height: 110px;
margin-left: 10px;
}
.w3c div div > div:hover:after {
display: block;
content: '';
position: absolute;
border: 1px solid black;
width: 178px;
height: 108px;
}
关于html - 为什么这个伪类选择器不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9262025/