Question

我有一个像：

这样的元素

<a id='a_id' class='a_class'>Next</a>

元素以绿色显示，带下划线。

当我将鼠标悬停在元素上时，它会变为浅绿色，而不是下划线（这很好）。

当我点击时，在鼠标按钮期间没有任何变化。

当我释放鼠标按钮时，元素会短暂变化，显示绿色背景并返回浅绿色，而不是下划线。

如何在发布鼠标按钮时更改CSS以防止更改？

我尝试了以下CSS：

.a_class {
    cursor:pointer;
    outline:none;
    text-decoration:none;
    background:#fff;
}

感谢。

更新＃1 - 使用.a_class：有效

我添加了以下CSS：

.a_class:active {
    outline:none;
    text-decoration:none;
    background:#fff;
    color:red;
}

我添加了颜色：红色以确认正在应用CSS。

当我按下鼠标按钮时，文本颜色变为红色。当我松开鼠标按钮时，背景会以绿色闪烁一秒钟。

还有其他建议吗？

感谢。

更新＃2 - 添加链接的完整CSS

当我用firebug检查页面时，元素具有以下CSS：

.a_class {
  background:#FFFFFF;
  cursor:pointer;
  outline:none;
  text-decoration:none;
}

a {
  color:#24890D;
  text-decoration:none; <- crossed out
}

.entry-content a, .entry-summary a, .page-content a, .comment-content a {
  text-decoration:underline; <- crossed out
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border:0;
  font-family:inherit;
  font-size:100%;
  font-style:inherit;
  font-weight:inherit;
  margin:0;
  outline:0; <- crossed out
  padding:0;
  vertical-align:baseline;
}

释放鼠标按钮时防止链接发生变化

0 个答案: