Question

我在html中有这个

<nav>
    <div class="inner">
        <div class="tabs">
            <a href="#one">headliners</a>
            <a href="#two">passes</a>
            <a href="#three">experience</a>
            <a href="#four">travel</a>
            <a href="#five">full lineup</a>
        </div><!--End tabs-->
    </div>
</nav>

并且我正在尝试将其设置为每当我将鼠标悬停在任何a标记上时，这些字词都会更改为color:#d10f82;

帮助将不胜感激。

Answer 1

赞a:hover { color: #d10f82; }？

See it here

Answer 2

在锚标签中添加一个类，然后使用悬停psuedo

.hovered-anchor:hover {
color:#d10f82
}

Answer 3

有了这个结构

<nav>
    <div class="inner">
        <div class="tabs">
            <a href="#one">headliners</a>
            <a href="#two">passes</a>
            <a href="#three">experience</a>
            <a href="#four">travel</a>
            <a href="#five">full lineup</a>
        </div><!--End tabs-->
    </div>
</nav>

这是具体的，你可以得到

  nav > .inner > .tabs > a:hover {
    color:#d10f82;
    }

＆＃13;

a {

  color: black;

}

nav > .inner > .tabs > a:hover {

  color: #d10f82;

}

＆＃13;

<nav>
  <div class="inner">
    <div class="tabs">
      <a href="#one">headliners</a>
      <a href="#two">passes</a>
      <a href="#three">experience</a>
      <a href="#four">travel</a>
      <a href="#five">full lineup</a>
    </div>
  </div>
</nav>

＆＃13;

在css中悬停有问题

3 个答案: