Украшение текста: нет и конфликт текста и тени

Question

Даже если text-decoration равно нет , применение text-shadow к ссылке, по-видимому, приводит к - при наведении курсора - отображает тень невидимого подчеркивания (только Chrome, Firefox в порядке). JSFiddle .

HTML:

<a class="bill-area" href="#" title="Watch">
    <div class="watch"><h2>Watch</h2></div>
</a>​

CSS:

a                 {color:#00C; text-decoration:none}
a:hover           {text-decoration:underline}
a:active          {color:#F00;}
.bill-area        {width:580px; height:300px;display:inline-block; background:#eee}
.watch            {position:absolute; top:60px; left:200px; display:block;}
.watch h2         {text-align:center; color:#333; text-shadow:0 0 1px rgba(255, 255, 255, 0.6),0 2px 1px #154C77;}
.bill-area:hover div h2  {text-decoration:none;}

Закомментируйте текстовую тень, чтобы увидеть разницу.

Answer 1

Попробуйте это CSS

  <style type="text/css">
  a                 {color:#00C; text-decoration:none}
a:hover           {text-decoration:none}
a:active          {color:#F00;}
.bill-area        {width:580px; height:300px;display:inline-block; background:#eee}
.watch            {position:absolute; top:60px; left:200px; display:block;}
.watch h2         {text-align:center; color:#333; text-shadow:0 0 1px rgba(255, 255, 255, 0.6),0 2px 1px #154C77;}
.bill-area:hover div h2  {text-decoration:none;}
  </style>

Answer 2

К сожалению, он делает то, что от него ожидают, показывая тень подчеркивания. Вместо добавления подчеркивания к тексту, почему бы не использовать свойство border-bottom ? http://jsfiddle.net/cchana/2YC2M/ - заменить: hover {text-художественное оформление: подчеркивание; } с:

a:hover div h2 {border-bottom:1px solid #00C;}

Это удалит тень текста, поскольку граница не является частью текста, в отличие от подчеркивания, которое считается частью текста.

Если вам не нужно подчеркивание, текстовое оформление или тень, удалите эту строку:

a:hover { text-decoration: underline; }