站长视角
用户至上

大前端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进制的颜色值替换上面的颜色。

赞(1)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《大前端DUX主题文章鼠标滑过背景色及添加彩色边框.》
文章链接:https://www.veidc.com/10972.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。