链接／Link

为链接到特定内容的链接设置不同的样式。

柔和修饰

Base 组件 设置了默认链接的颜色。如果希望链接改为柔和样式，只需将 .uk-link-muted class添加到锚点元素。您还可以将class添加到父元素，这样会将样式应用到其中的所有 <a> 元素。

<a class="uk-link-muted" href="#"></a>
  • Link

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <a class="uk-link-muted" href="#">Link</a>

<p class="uk-link-muted">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua.</p>

文本修饰

要使链接看起来和正文文本一样并应用鼠标悬停效果，请将 .uk-link-text class类添加到锚元素。您还可以将类添加到父元素，它将应用于其中的所有 <a> 元素。这对于页面页脚中的链接列表非常有用。

<a class="uk-link-text" href="#"></a>
  • <ul class="uk-list uk-link-text">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

标题修饰

要在标题元素内设置链接样式，请将 .uk-link-heading class类添加到锚元素内。

<h3><a class="uk-link-heading" href="#"></a></h3>

  • Heading

  • <h3><a class="uk-link-heading" href="#">Heading</a></h3>

重置修饰

要重置链接的颜色，使其继承父级的颜色，请添加 .uk-link-reset class。这个修饰不带有任何悬停效果，这对于标题元素内的链接很有用。您还可以将它添加到父元素，这样样式将应用到其中的所有 <a> 元素上面。

  • Link

    Heading

  • <a class="uk-link-reset" href="#">Link</a>

<h3><a class="uk-link-reset" href="#">Heading</a></h3>

切换

要使用锚点作为父元素并在其中一个子元素上应用链接样式，只需将 .uk-link-toggle class类添加到父元素，并将 .uk-link-* class类之一添加到子元素。比如为整个卡片设置链接，但是只在标题上具有鼠标悬停效果。

<a class="uk-link-toggle" href="#">
    <span class="uk-link-heading"></span>
</a>

上一篇： Lightbox

下一篇： List

link.md

# 链接／Link

<p class="uk-text-lead">为链接到特定内容的链接设置不同的样式。</p>

## Muted modifier-柔和修饰

[Base 组件](base.md) 设置了默认链接的颜色。如果希望链接改为柔和样式，只需将 `.uk-link-muted` class添加到锚点元素。您还可以将class添加到父元素，这样会将样式应用到其中的所有 `<a>` 元素。

```html
<a class="uk-link-muted" href="#"></a>
```

```example
<a class="uk-link-muted" href="#">Link</a>

<p class="uk-link-muted">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua.</p>
```

***

## Text modifier-文本修饰

要使链接看起来和正文文本一样并应用鼠标悬停效果，请将 `.uk-link-text` class类添加到锚元素。您还可以将类添加到父元素，它将应用于其中的所有 `<a>` 元素。这对于页面页脚中的链接列表非常有用。

```html
<a class="uk-link-text" href="#"></a>
```

```example
<ul class="uk-list uk-link-text">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
```

***

## Heading modifier-标题修饰

要在标题元素内设置链接样式，请将 `.uk-link-heading` class类添加到锚元素内。

```html
<h3><a class="uk-link-heading" href="#"></a></h3>
```

```example
<h3><a class="uk-link-heading" href="#">Heading</a></h3>
```

***

## Reset modifier-重置修饰

要重置链接的颜色，使其继承父级的颜色，请添加 `.uk-link-reset` class。这个修饰不带有任何悬停效果，这对于标题元素内的链接很有用。您还可以将它添加到父元素，这样样式将应用到其中的所有 `<a>` 元素上面。

```example
<a class="uk-link-reset" href="#">Link</a>

<h3><a class="uk-link-reset" href="#">Heading</a></h3>
```

***

## Toggle-切换

要使用锚点作为父元素并在其中一个子元素上应用链接样式，只需将 `.uk-link-toggle` class类添加到父元素，并将 `.uk-link-*` class类之一添加到子元素。比如为整个卡片设置链接，但是只在标题上具有鼠标悬停效果。

```html
<a class="uk-link-toggle" href="#">
    <span class="uk-link-heading"></span>
</a>
```

```example
<a href class="uk-display-block uk-card uk-card-body uk-card-default uk-link-toggle uk-width-medium">
    <h3 class="uk-card-title"><span class="uk-link-heading">Heading</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
```