Im пытается использовать: после селектора, чтобы нарисовать внутреннюю границу в каждом div, наведите курсор мыши. Теперь псевдо-класс «: after» не работает? любая идея, почему этот селектор не работает? если я просто использую псевдокурс: hover pseudo class, дело в том, что я хочу использовать оба класса!Почему этот псевдо-селектор не работает?

Посмотрите на эту 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>

СМЧ ----

@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

При наведении вы хотите отобразить как красную границу, так и черную? Если это так, вы можете достичь этого без: после, но с другим css/html комбо – aletzo

@boltClock эй! интересно, как можно отредактировать код в правильном направлении с цветами и так далее? Я видел, как ты сделал это в своем посте. :) благодаря! – YoniGeek

Для :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

да и нет, посмотрите на это ex: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/, но спасибо за год! :) – YoniGeek

Почему этот псевдо-селектор не работает?

Пример Шесть

ответ

Смежные вопросы