首页 >web前端 >html教程 > 正文

求助:a:active 不生效!!_html/css_WEB-ITnose

原创2020-10-27 12:42:250572
我想用以下css实现:选择一个菜单后,停留在a:active的样式上。

现在的问题是:当鼠标按下去的时候样式是有的,一松开或移走,就回到a:link的样式了。



/*CSS样式*/

#menu ul li {background: #eef; border-bottom: 1px solid #CCC; float:left;}
#menu ul li a { display:block; height: 38px; width:168px; line-height: 38px; float:left;}
#menu ul li a:link {background: #eef; color:#666;}
#menu ul li a:visited {background: #eef; color:#666;}
#menu ul li a:hover { background:#3ab3ec; font-size:14px; color:#fff; font-weight:bold;}
#menu ul li a:active { background:#3ab3ec; font-size:14px; color:#fff; font-weight:bold;}

/*html代码*/



回复讨论(解决方案)

因为#menu ul li a:visited {background: #eef; color:#666;},鼠标移开之后真正起作用的是
a:visited

没错,楼主好好看看几个伪类表示的作用。

因为#menu ul li a:visited {background: #eef; color:#666;},鼠标移开之后真正起作用的是
a:visited
因为这个是菜单导航,没次点击,内容都会变的,就是希望该导航栏能根据选择的菜单固定为a:active时的样式,并不希望它被访问后一直是这个样式。

这个能用伪类实现吗?

。。。active是 点击时 link是点击后 LZ你先去看看伪类是啥意思吧

引用 1 楼 conan8126 的回复:
因为#menu ul li a:visited {background: #eef; color:#666;},鼠标移开之后真正起作用的是
a:visited
因为这个是菜单导航,没次点击,内容都会变的,就是希望该导航栏能根据选择的菜单固定为a:active时的样式,并不希望它被访问后一直是这个样式。

这个能用伪类实现吗?

其实这种问题,给没有选中的导航菜单设定一个样式,给没有选中的导航菜单设定一个样式,然后用javascript来实现,代码如下

function selectTab(idx) {    for (var i = 1; i <= 7; i++) {       if (idx == i) {            document.getElementById("TD" + i).className = "tabSelect";       } else {            document.getElementById("TD" + i).className = "tabUnSelect";       }    }}

多谢 @conan8126 !!

以上就是求助:a:active 不生效!!_html/css_WEB-ITnose的详细内容,更多请关注php学习网其它相关文章!

phpStudy Linux 面板(小皮面板)
  • 相关标签:求助:a:active 不生效!!
  • 本文原创发布php学习网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    php学习网

    认证0级讲师

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类