产品需求:想在鼠标移动到“移除”的时候,“1.产品匹配测试”添加下划线和更改字体颜色
需求分析:从需求可以看出使用 :hover 就可以解决的问题,但是在实践中发现兄弟选择器(+)不好使,(+)只能是之后的,那如果想要访问当前元素(假设为a)的前一个节点(假设为b)就不能了
解决思路:对于相邻节点少的情况下可以将节点书写顺序颠倒(就是将a与b的位置换一下),然后在有排序就好啦,相关代码如下:
<style> .history-desc{ height: 25px; line-height: 25px; font-size: 13px; cursor: pointer; text-indent: 26px; color: #666; } .history-desc>div{ float: right; } .history-remove:hover + .history-name{ text-decoration: underline; color: #333; } </style>
<div class="history-desc"> <div class="history-remove">移除</div> <div class="history-name">1.产品匹配测试</div> </div>