Question

我有一个小问题，无法弄清楚如何解决它。在我的HTML中，我有一个带有“/ span”标记的ahref标记，换行符和一个新的“span”标记。

在我的CSS中，我有一个类，当鼠标悬停时，我的ahref标签下划线。

其中带有“/ span”“br”“span”的一个ahref标签不会同时下划线...当鼠标悬停在每条线上时，它们将仅单独下划线。（以下演示）

跨度类用于线高度调整，这些调整是与相邻上下文正确对齐所需的。

简化的HTML：

<span class="span1">
    <a href="www.google.com" target="_blank">The Google</a><br/><br/>
    <a href="www.stackoverflow.com" target="_blank">The StackOverFlow</a><br/><br/>
    <a href="www.us.gov" target=_"blank">Important </span><br /><span class="span2"> Information</a></span>

简化CSS：

a, a:link, a:active, a:visited{
    text-decoration: none;
}

a:hover{
    text-decoration: underline;    

}

span.span1{
    font-style:normal;  
    font-size:70%;
    line-height: 250%;
}

span.span2{
    font-style:normal;  
    font-size:70%;
    line-height: 100%;

}

任何想法？请参阅演示：http://jsfiddle.net/9rFzC/

Answer 1

您错过了span中第一个a的开始和结束标记以及容器span.span1的结束标记。只需添加它们即可。你不能那样嵌套它。

您在该链接中的目标声明也是错误的，下划线是值的一部分。好像是一个错字。

Answer 2

span仅适用于内联内容...

删除跨度，并替换为

<div id="whateva">...your links br etc </div>

然后

#whateva:hover { text-decoration: underline; }

Answer 3

将您的HTML更新为：

<span class="span1">
    <a href="www.google.com" target="_blank">The Google</a><br/><br/>
    <a href="www.stackoverflow.com" target="_blank">The StackOverFlow</a><br/><br/>
    <a href="www.us.gov" target=_"blank"><span>Important </span>

<br /><span class="span2"> Information</span>

</a>
</span>

它应该无缝地工作。基本上，修复丢失的<span>和</span>标记。

检查这个小提琴：http://jsfiddle.net/9rFzC/2/

为所有href标记文本加下划线：在<href标记</span>中包含<span>的问题

3 个答案: