2011-12-30 58 views
5

里面我有这样的联系:文本装饰链路和跨度此链接

<a href="#">Link text<span>Link sub-text</span></a> 

徘徊时,我需要内部跨度文本不饰有下划线(但主要链接文本)。可能吗? 我试过了:

a:hover span {text-decoration:none;} 

这是行不通的。

有没有解决方案?

+1

就想通了,我只需要将主链接文本放置在链接跨度外的跨链接和子链接文本中,如: 'Link textsub-text' 和CSS:'a:hover {text-decoration:none;} a:hover span {text-decoration:underline; }' 这对我有效。 – wzazza 2011-12-30 16:01:58

+1

相关:[CSS文本修饰属性不能被子元素覆盖](http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element)和[我如何让这个CSS文本修饰覆盖工作?](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) - 这些问题解释了为什么'span'中的'text-decoration none'不起作用。所以是的,你的解决方案几乎是解决这个问题的唯一方法。 – BoltClock 2011-12-30 17:28:34

回答

5

添加链接文字(您想文本用下划线来饰)内<span>和子文本之外的正常链接文本,像:
<a href="#"><span>Link text</span>sub-text</a>

为了装点链接文本使用:

a:hover { 
    text-decoration:none; 
} 
a:hover span { 
    text-decoration:underline; 
} 
0

另一种解决方案是使用,而不是下划线作为标识的颜色:

<a id="outer-link" href="#"> 
    Outer text <span id="inner-text">inner text</span> more outer text. 
</a> 

<style> 
    a { text-decoration: none; } 
    #outer-link:hover { color: green; } 
    #outer-link:hover #inner-text { color: red; } 
</style> 
+0

是的,它可以,也可以是大胆,斜体,大写等,请不要发布一切可能的方式,问题只是强调。谢谢。 – wzazza 2012-01-09 13:57:38

1

在Si多解决方案是使用colorborder属性,而不是text-decoration。您需要首先设置text-decoration: none,然后使用border-bottom作为所有链接的下划线。

的style.css

a, a:link, a:visited 
{ 
color: #11bad3; 
text-decoration: none; 
border-bottom: 1px solid #11bad3; 
} 

a:hover, a:active 
{ 
background: #00a9c2; 
border-color: #00a9c2; 
color: #fff; 
} 

print.css

a, a:link, a:visited 
{ 
border-bottom: 0px; 
} 

的index.html

<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all"> 
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print"> 
0

我知道这是一个OL但是由于我只是遇到了同样的问题,并提出了一个解决方案,所以我想我会写它。的

而不是使用文本修饰尝试:下划线,而不是仅仅使用底部边框:1px的固体#000,这样一来,你可以简单地说,下边框:无,