大前端DUX主题文章鼠标滑过背景色及添加彩色边框.

DUX主题默认的首页是以文章列表的形式显示的，当鼠标滑过文章列表中的文章时鼠标所在的文章会变暗一些但是很不明显美观，其主要原因是主题的CSS样式将颜色值调整的太低了，可能是主题作者为了保持主题小清新的感觉而有意为之的，但是对于一些有特殊要求的用户来说可能这种文章选中状态的区分感太低了，这次我们就一起来通过修改DUX主题的main.css样式表更改下主题首页文章列表鼠标滑过时的背景色并为其增加一个彩色的边框以使得选中文章时高亮起来。上图是主题修改前后的效果，需要注意的是修改主题之前为了避免由于不当操作而引起的网站无法访问等问题，还是希望大家事先备份下我们这次要修改的文件main.css。其实这次对于DUX主题所做的修改很简单，你只需要使用FTP工具登录网站后台并下载下来main.css文件，使用Notepad++文本编辑工具通过查找.excerpt:hover将其中的代码改为如下所示即可：.excerpt:hover{background-color: #f0ffff;border-color: #24b4f0;position: relative;z-index: 2;}如果你不喜欢上面代码中的颜色，也可以自定义修改成其他的颜色。需要注意的是，这里的颜色值为16进制，一个简单的获取颜色值得方法是你可以打开Photoshop等软件的调色板选择自己喜欢的颜色并复制16进制的颜色值替换上面的颜色。