css 设置鼠标经过的时候鼠标变成手状假装是个链接

Posted 2021-06-06 雾恋过往

背景业务要求

        在设计网站的时候，有这样一个需求，用 js 来控制一个 div 的显示与关闭，以模拟链接的作用，为什么要这么做的原因是，避免用链接跳转时候带来的页面跳转让使用者不适，下面就是用链接的实现效果

       

理想效果

       

       

现在的模样

        可以看到，虽然有了颜色提示，但用起来效果不是那么的让人满意，得添加下划线和鼠标变化成手状提醒用户这儿可以点击

方法

        给他们添加一个类，这个类是干嘛用的呢，就是当鼠标经过的时候添加下划线和让鼠标变成手状，比如我就给他们都添加了一个类 xiahuaxian 利用 hover 这个伪类实现 ，现在就是理想的效果了

.xiahuaxian:hover {
    text-decoration: underline;
    cursor: pointer;
}