我有一个 css 类分配给这样的按钮:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button a:hover {
color: #f1f1f1;
background: #232856
}
.button
完美运行,满足我的所有需求。
但是 a
和 a:hover
部分什么也不做。
有什么想法吗?
答案 0 :(得分:1)
您可以去掉 a: 悬停,而只使用 button: hover {
代码如下:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button:hover {
color: #f1f1f1;
background: #232856
}
应该可以。当你需要按钮等带有悬停效果的东西时,你不需要包含a:,只需写button:hover
答案 1 :(得分:0)
我认为您可能忘记了按钮的类,如果您想通用,则在样式中使用 button
而不是 .button
。
你也忘记了 text-decoration: none
后面的分号,所以这个车道和下面在同一块范围内的每个 css 样式都没有应用。
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1;
}
.button a {
color: #232856;
text-decoration: none;
}
.button a:hover {
color: #f1f1f1;
background: #232856;
}
<button class="button">
<a href="#">My a inside button<a>
</button>
答案 2 :(得分:0)
改为
.button:hover a{
// styling when on hover
}
答案 3 :(得分:0)
我觉得我的按钮坏了!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.btn {
background-size: 10px 10px;
background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
height: 600%;
transform: rotate(-35deg);
transition: 0.3s;
}
.btn:hover {
color: gold;
}
</style>
</head>
<body>
<br><br>
<button class="btn btn-default btn-lg">Hover Over Me</button>
</body>
</html>