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

注释掉text-shadow以查看差异。

Answer 1

不幸的是，它正在做它所期望的，显示下划线的阴影。为什么不使用 border-bottom 属性，而不是在文本中添加下划线？ http://jsfiddle.net/cchana/2YC2M/ - 替换a：hover {text-decoration：underline;与...：

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

这将删除文本阴影，因为边框不是文本的一部分，不像被认为是文本一部分的下划线。

如果您不想要任何下划线，文字装饰或阴影，请删除此行：

a:hover { text-decoration: underline; }

Answer 2

试试这个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>

文本修饰：无和文本阴影冲突

2 个答案: