0

我的首页（即出现帖子的页面）上的链接是红色的，当悬停时它们变成白色。但是在我的静态页面上，我希望链接在悬停时是白色和红色的，我该怎么做？Tumblr 允许将 html 添加到您的静态页面。

这是我首页的 CSS 标记：

  a{
  text-decoration:none;
   color:red;
   }

 a:hover{
 color:white;
-moz-transition: all .2s;
 -webkit-transition: all .2s;
 -o-transition: all .2s;
   transition: all .2;
  }

现在这是我的静态页面上的 html

   <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>

静态页面继承了首页的html和css。我试过添加

       <div id="page"> </div>

使它变成

<div id="page">
 <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>
  </div>

然后尝试使用 css 对其进行样式设置：

ul.list li {
color: white

}

但这行不通.. :( 有人可以帮我吗？

4

1 回答 1

0

它不起作用，因为您实际上并未在第二个样式声明中定位锚标记。尝试：

#page #list a {
    color: #fff; /* white */
}

这不会改变悬停状态，但会改变颜色。要更改悬停状态，您必须专门针对它覆盖您在上面定义的通用 a:hover 。

您还需要定义 ':visited' 样式，否则您可能看不到这些更改反映（因为链接已经被访问过）。

#page #list a:visited {
    color: #fff; /* white */
}

或者您可以在一个块中定义所有状态，假设它们应该具有相同的样式。

#page #list a, #page #list a:visited, #page #link a:hover, #page #list a:active {
    color: #fff; /* white */
}

如果不清楚，第一个选择器会像最初一样针对链接，第二个选择器在链接被访问后定位，第三个针对链接的悬停状态（即，当鼠标悬停在链接上时的样式）和第四个目标是链接的活动状态（即，当链接实际被点击/点击时）。

此外，您没有使用正确的选择器进行 ID 选择。'。' 按类选择，'#' 按 ID 选择。

于 2013-08-17T06:48:31.730 回答