css 鼠标点击后变色，点下一个连接，上一个怎么变回来啊 ？ http://www.hfty.com/products.asp?treeid=51

Posted 2023-04-20

css 鼠标点击后变色，点下一个连接，上一个怎么变回来啊 ？
http://www.hfty.com/products.asp?treeid=51 就和这个左侧的效果一样

这个是用javascript控制的。非常简单。复制到body里面试下。
<style>
a.selectcolor:#F00;/*选中的样式*/
</style>
<script>
function left_btn(n)

var a_num=document.getElementById("left_btn_box").getElementsByTagName("a");
for(i=0;i<a_num.length;i++)

a_num[i].className=i==n?"select":"";


</script>
<div id="left_btn_box">
<a class="select" onclick="left_btn(0)" href="#">按钮1</a>
<a onclick="left_btn(1)" href="#">按钮2</a>
<a onclick="left_btn(2)" href="#">按钮3</a>
</div> 参考技术A 超链接的伪类有一下四种
a:link color: #FF0000 /* 未访问的链接 */
a:visited color: #00FF00 /* 已访问的链接 */
a:hover color: #FF00FF /* 鼠标移动到链接上 */
a:active color: #0000FF /* 选定的链接 */
搭配使用可以出现很好的交互效果
但像你说的那种效果应该是用js做的，css可能无法达到那种显示效果。
你可以自己试着搭配使用看看，说不定可以达到你想要的效果。但是我的技术不好，暂时没试出来。 参考技术B 伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class property: value; ，简单地用一个半角英文冒号（:）来隔开选择符和伪类。 　　
CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的伪类。 　
:link用在未访问的连接上。 　　
:visited用在已经访问过的连接上。 　　
:active用于获得焦点（比如，被点击）的连接上。 　　
:hover 用于鼠标光标置于其上的连接。 　　
:after 用于显示紧跟在元素后面的内容 content。 　　a.snowman:link color: blue; a.snowman:visited color: purple; a.snowman:active color: red; a.snowman:hover text-decoration: none; color: blue; background-color: yellow;

a:hover是鼠标移动到上面变色，a:active是点击变色，不要设置a:visited，这个是访问过的链接的颜色。

参考资料：http://baike.baidu.com/view/814193.html?wtp=tt

参考技术C 楼主可以用DW的框架试试，框架比较简单，这里写说明太麻烦了，你到网上看一下视频就知道怎么用框架了http://www.enet.com.cn/eschool/zhuanti/dreamweavershili/4/ 参考技术D 按照这个顺序写就对了：
a:link,a:visited 访问前 以及访问后的设置
a:hover 鼠标悬浮的时候的

vue点击超链接后变色

参考技术A 两种情况。
具体如下：
1.第一种是点击单行元素变色，点击另一行元素时，原来变色的元素变回原来的颜色，始终只有一行元素是变色的。
2.第二种情况是点击后永久变色，点击其他元素变色，不影响已经变色的元素。