Question

我有一个目标，我只想用HTML和CSS来完成：链接的内联列表在悬停时增加大小并且更改字体（这导致之前的奇怪问题），

A）悬停一个链接不应该扰乱其他链接。

B）保持动态，避免为每个新链接定制CSS。

C）如果margin：0 20px 0 20px，那应该来自文本的末尾 - 这看起来更清晰，因为它使链接之间的间距保持不变（参见不做完）。固定宽度的容器通常违反了这一点。

D）悬停时，文本应垂直和水平居中。

E）请尽量保留HTML和CSS。如果它包含JS或JQ，那么对于我对语言缺乏了解以及JSFiddle只是一个简单的例子而不是我的实际页面这一事实来实现起来会更加困难。

我现在最好符合前两个和最后一个标准而不满足第三个标准，它使用表格（我知道）：

JSFiddle

或代码：

<table><tr> <td><div>ONE</div></td> <td><div>TWO</div></td> <td><div>THREE</div></td> <td><div>FOUR</div></td> <td><div>FIVE</div></td> </tr></table>

和...

div:hover { font-size: 130%; font-family: comic sans ms; } div { width: 10px; margin: 0 30px 0 30px; height: 20px; }

问题是边距是从 div 而不是文本测量的，因此我必须为每个链接定制边距。此外，悬停会使字体/链接向下和向右移动，违反指南D.

This只要文本不是太长就动态工作，但是悬停会扰乱其他链接。它也违反了D.

任何帮助都将不胜感激。

Answer 1

使用line-height属性可以轻松处理内联文本的垂直对齐。确保正常和大字体大小的行高相同。例如。对于普通文本，我使用line-height: 1.5em，对于我使用的大文font-size: 130%; line-height: 1.15385em;。 1.30×1.15385 = 1.50

我看到的主要问题是，当悬停浏览器需要布局的原始大小的文本时，它还需要更大的文本来显示。我看到的一个解决方案是复制链接文本，并根据悬停状态只显示一个版本：

HTML：

<ul>
<li><a href="#"><span>link 1</span><span>link 1</span></a>
<li><a href="#"><span>link 2, with some long text</span><span>link 2, with some long text</span></a>
<li><a href="#"><span>link 3</span><span>link 3</span></a>
</ul>

CSS：

ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }

li { border: 1px dotted red; position: relative; }
li a span:first-child { padding: 0 30px; }
li a span:last-child { position: absolute; width: 100%; left: 0; font-size: 130%; line-height: 1.15385em; text-align: center; visibility: hidden; }
li:hover a span:first-child { visibility: hidden; }
li:hover a span:last-child { visibility: visible; }

http://jsfiddle.net/g16Ldusx/2/

我可能会使用一些javacript复制它，而不是复制HTML中的链接文本。

如果您不想复制并且实际上不想使用javascript，则可以使用:before和:after伪元素，并将链接文本放在HTML5数据属性中。不知道浏览器对这个浏览器的支持有多好。

HTML：

<ul>
<li><a href="#" data-text="link 1"></a>
<li><a href="#" data-text="link 2, with some long text"></a>
<li><a href="#" data-text="link 3"></a>
</ul>

CSS：

ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }

li { border: 1px dotted red; position: relative; }
li a:after { content: attr(data-text); padding: 0 30px; }
li:hover a:after { visibility: hidden; }
li:hover a:before { content: attr(data-text); position: absolute; width: 100%; font-size: 130%; line-height: 1.15385em; text-align: center; }

http://jsfiddle.net/kyad4tfh/

另请注意，要求A和C可能会相互冲突。元素之间的边距必须足够大，以适应文本宽度的增加。

在悬停时增加大小的并排链接，而不会破坏其他链接

1 个答案: