CSS hover property игнорируется

Может ли кто-нибудь понять, почему это не работает? Для этого примера коробка должна быть белой, когда она зависает.CSS hover property игнорируется

<style type="text/css" media="screen"> 
    .center { 
     margin: 0 auto; 
    } 
    .box { 
     width: 250px; 
     height: 250px; 
     display: block; 
     background: #000; 
     border: 1px solid white; 
     float: left 
    } 
    .inner { 
     width: 175px; 
     height: 175px; 
     display: block; 
     margin-top: 15%; 
     margin-left: 15%; 
     background: #fff; 
     position: relative 
    } 
    .boxLink { 
     position: absolute; 
     left: 0; 
     right: 0; 
     margin-left: auto; 
     width: 100%; 
     text-align: center; 
     line-height: 175px; 
     font-size: 30px 
    } 
    a:link.boxLink { 
     color:#000; 
     background: yellow 
    } 
    a:visited.boxLink { 
     color:#000; 
     background: yellow 
    } 
    a:hover.boxlink { 
     color:#fff; 
     background: white 
    } 
    a:active.boxLink { 
     color:#000; 
     background: green 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div class="box"> 
      <div class="inner"> 
       <a class="boxLink" href="#">about</a> 
      </div> 
     </div> 
    </div>

источник

2010-07-18 Zac

Это действительно работает. По-видимому, вы сделали слишком много сокращения для своего уменьшенного теста. (Вы * даже не сделали обычную ошибку: добавьте стиль: visited далее вниз по каскаду, затем стиль: hover). – Quentin

Чтобы уточнить (потому что в коде есть также элемент * box *): Только ** ссылка ** получит белый фон. –

Он работает для меня (протестирован на Chrome и Safari на Mac OS X). Какой браузер вы используете? – quantumSoup

Вы должны поставить имя класса до того:hover:

a.boxLink:link{color:#000; background: yellow} 
a.boxLink:visited{color:#000; background: yellow} 
a.boxLink:hover {color:#fff; background: white} 
a.boxLink:active {color:#000; background: green}

Хотя мое предложение является хорошей практикой, вы на самом деле сделал ошибку в орфографическую на этой hover линии:

a.boxlink:hover {color:#fff; background: white}

CSS с учетом регистра, вы должны сделать это l прописной.

источник

2010-07-18 07:46:56

ack @! Я устал. Благодаря! Интересно, что другие pseduoClasses работали с неправильным форматом .. только зависание было проигнорировано. – Zac

Где говорится, что в спецификации? Или вы говорите об ошибке в определенном браузере? – Quentin

@David Dorward, вы правы [синтаксис CSS2.1 Selectors] (http://www.w3.org/TR/CSS2/selector.html#selector-syntax) говорит: «Простой селектор - это либо селектор типа, либо универсальный селектор, за которым сразу следуют ноль или несколько селекторов атрибутов, селекторы идентификаторов или псевдоклассы ** в любом порядке **. " – FelipeAls

CSS hover property игнорируется

ответ

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