[英]why this pseudo class selector is not working?
I'm trying to use:after selector to draw a inside-border in every div I hover. Now the ":after" pseudo class doesn't work?我正在尝试使用:after 选择器在每个 div I hover 中绘制一个内边框。现在“:after”伪 class 不起作用? any idea why this selector doesn't work?
知道为什么这个选择器不起作用吗? if I just use the:hover pseudo class works, the thing is that I want to use both classes!
如果我只使用:hover 伪 class 作品,问题是我想同时使用这两个类!
thanks!谢谢!
<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>
The css: 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;
}
For the :after
pseudo-element to show up you need to give it content and display it as a block.要显示
:after
伪元素,您需要为其提供内容并将其显示为块。
Then, absolutely position the :after
and relatively position the div
itself:然后,绝对 position
:after
和相对 position 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;
}
I've found out what the problem is.我发现了问题所在。
::after
is used to add content after an existing element, not to style elements that come after things. ::after
用于在现有元素之后添加内容,而不是为事物之后的元素设置样式。
You might want to use nth-child()
to target the x elements, or every x element.您可能希望使用
nth-child()
来定位 x 元素或每个 x 元素。
.w3c div div > div:nth-child(2):hover {
border: 1px solid black;
}
http://css-tricks.com/how-nth-child-works/ http://css-tricks.com/how-nth-child-works/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.