本文探讨了在前端开发中，针对‘收藏夹’和‘商品分类’两个元素在鼠标悬停时的不同交互效果。作者通过创建后代选择器和新增类`hoverWhite`尝试实现差异化hover效果，但遇到无法同时应用两个类的问题。解决方案是为需要改变背景色的列表项单独添加`hoverWhite`类，以实现背景变白的效果，从而提高用户体验。
先观察图1.1和图1.2，“收藏夹”和“商品分类”在鼠标移入后是两种不同的效果：
- “收藏夹”在鼠标移入后会弹出一个略缩的卡片；
- “商品分类”是直接地跳转页面，所以没有鼠标移入后的卡片弹出。
所以在两者的hover上也需要不同的效果来提醒用户“停留或者点击”：
- “收藏夹”背景变成和弹出卡片一样的颜色提醒用户停留；
- “商品分类”只需要提示用户点击即可。
我的方法：
创建一个后代选择器“hoverWhite"
在实验之后，发现无法在css里实现编写两个类控制一个样式的方法（图2.3），所以单独为hover创建一个类“hoverWhite"，在所有的列表项（li）受到“盒子的类”控制的情况下，<li class=“hoverWhite">还能进一步细分出需要变化背景色的列表项，进行区分对待，实现上述功能。
以上就是我在学习前端时的一些小感悟，如果有错误或者更好的方法，欢迎在评论区留言！
啾啾啾~(づ￣ 3￣)づ~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
