仿类京东商城鼠标移动变色的伪类元素，怎么使字体变色而不是全部变色？

Question

.topmenu li a:hover        {            text-decoration: underline;            font-weight: bold;            color: #e4393c;        }举个例子就是我鼠标移动到京东的手机/数码/运营商这一栏的手机，手机字体变色而不是所有变色

Answer 1

首先，楼主的代码没有错误。

就拿京东的HTML来说：

<li class="cate_menu_item cate_menu_item_on" data-index="2" clstag="h|keycount|2016|0602a">
	<a target="_blank" class="cate_menu_lk" href="#">
		手机
	</a>
	<span class="cate_menu_line">
		/
	</span>
	<a target="_blank" class="cate_menu_lk" href="#">
		运营商
	</a>
	<span class="cate_menu_line">
		/
	</span>
	<a target="_blank" class="cate_menu_lk" href="#">
		数码
	</a>
</li>

京东应该是这么写的（只写思路）：

//这段代码模拟了鼠标放在li时，这条背景改变。
$("li.cate_menu_item").on("mouseover", function(){
    $(this).addClass("cate_menu_item_on");
});

CSS：

li.cate_menu_item a:hover{
    color:red;
};

就这样行了哈。

Answer 2

举个例子就是我鼠标移动到京东的手机/数码/运营商这一栏的手机，手机字体变色而不是所有变色

Answer 3

你这样写好像也可以吧,就是放在a的上面的时候 a变色, 你试试写成  .topmenu li:hover a{  }  这样放在li上面的时候a变颜色

Answer 4

把li 去掉，试试