示例六

Question

我试图使用：在选择器之后绘制每个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 ----

@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; }

Answer 1

要显示:after伪元素，您需要为其提供内容并将其显示为块。

然后，绝对定位: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;
}

Answer 2

我发现了问题所在。

::after用于在现有元素之后添加内容，而不是在事物之后添加样式元素。

您可能希望使用nth-child()来定位x个元素或每个x元素。

.w3c div div > div:nth-child(2):hover {
     border: 1px solid black;
}

http://css-tricks.com/how-nth-child-works/

为什么这个伪类选择器不起作用？

示例六

2 个答案: