我試圖使用：選擇器後，在每個div中繪製一個內部邊框我懸停。現在「：後」僞類不工作？任何想法爲什麼這個選擇器不起作用？如果我只是使用：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; }

來源

2012-02-13 YoniGeek

'：after'是僞元件，'：hover'是一個僞類。你*可以*一起使用。 – BoltClock 2012-02-13 14:28:47

懸停時是否要顯示紅色邊框和黑色邊框？如果是這樣，你可以實現它沒有：之後的事情，但與不同的CSS/HTML組合 – aletzo 2012-02-13 14:38:55

@boltClock嘿！想知道如何用顏色等方式來正確編輯代碼？我看到你在我的帖子中做過。：）謝謝！ – YoniGeek 2012-02-14 09:38:50

對於: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; 
}

來源

2012-02-13 14:32:52 BoltClock

我已經找到了問題所在。

::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/

來源

2012-02-13 14:45:58 desbest

是的，不，看看這個例子：無論如何，謝謝你的輸入！ :) – YoniGeek 2012-02-14 07:26:51

爲什麼這個僞類選擇器不工作？

實例六

回答

相關問題