tab选项卡常用小三角的问题

开发工具与关键技术：DW JavaScript

作者：吴观成

撰写时间：2019年1月18日

在设计网页tab选项卡的时候会有常用到一个小三角形来增加想要的网页效果，下面用华为官网部分的截图来举例：

像华为官网这种是用鼠标移入与移出事件来控制它的选项卡内容与小三角切换的。

我在模仿华为官网做案例的过程中发现了一个关于这小三角在JS获取切换的问题,下面是我简单模仿华为官网的截图（只是小三角部分）：
HTML源代码部分：

我是用li标签包裹一个a标签，给li标签一个类名和id名，然后在a标签里面加一个i标签来写小三角的样式。

CSS样式代码部分：


JS代码部分：

因为下面还有内容，所以加载事件的结尾括号不在这截图里面

这是小三角的初始状态：

当鼠标移上去的时候小三角会切换成向上的效果，移开就会恢复初始状态：


但是我在调试的过程中发现在鼠标移入再移出之后小三角并不是每次都会恢复回初始的状态，像这样：

它会保留在鼠标移入的状态
这个问题是因为当我鼠标从a标签的范围内移出来小三角就恢复不了。

a标签的父级元素li的大小：

a标签大小：


也就是小三角有移入移出的切换只在li标签范围的两侧，如果在a标签范围内，只有移入的效果，没有移出的恢复。

然后我就修改了我的源代码：
源代码修改前：

源代码修改后


我把原来li标签的类名和id名换到a标签上面

JS修改前：

修改前是先获取到li标签，然后改变li里面的内容

JS修改后：

修改后是直接获取到a标签，然后修改a标签的内容
这样子修改后就没有出现小三角只有移入没有移出的切换了，

我也请教了老师，老师说这是因为不能跨级去改变它的内容，我要改变i标签的内容，只能通过i标签的父级元素a标签来改变，不能一开始从a标签的父级li标签来改。（改儿子是爸爸改，不是爷爷改）

不过我还有个小疑问就是：从innerHTML的作用上来看，为什么不能跨级，这是一条规定吗？求解………