html - 如何在鼠标悬停时更改元素的颜色?
问题描述
移动鼠标后,三角形中的颜色没有变化。如何改变它?我正在努力,但我做不到。
https://jsfiddle.net/m59azhn8/3/
<button type="submit">Turn to the dark side</button>
CSS:
* {
text-align: center;
margin: 0;
padding: 0;
}
button[type=submit] {
padding: 20px 30px;
background-color:black;
border: 0;
position: relative;
color: #ffe200;
font-size: 22px;
}
button[type=submit]:after {
content: '';
border-width: 23px;
border-color: transparent black black transparent;
border-style: solid;
position: absolute;
top: 9.5px;
left: 228px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
button[type=submit]:hover {
color: black;
background-color: #ffe200;
border-color: transparent #ffe200 #ffe200 transparent;
}
解决方案
您可以将以下内容添加到您的 CSS 样式中。
button[type=submit]:hover:after {
border-color: transparent #ffe200 #ffe200 transparent;
}
推荐阅读
- mysql - PDO 插入 MySQL 数据库
- angular - 如何在Angular 6中通过`ng serve`设置环境
- sql - SQL:插入具有汇总值的行
- android - 下图
- ios - 如何移动逻辑以显示 UITableViewRowAction 从委托方法到视图模型(MVVM 架构)
- makefile - 如果使用 arm-poky-linux-gnueabi-gcc 在不同文件夹中构建相同的代码,则生成的二进制文件将具有不同的内容
- android - 如何不将下载的 mp3 文件显示到画廊?
- ruby-on-rails - 如何将特定控制器操作日志从 production.log 移动到 test.log ?红宝石 1.8.7 轨道 2.3
- reactjs - Okta 与 React JS
- java - 无法从 Firebase 访问嵌套数据