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

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 去掉，试试