Question

对大多数人来说，这应该是一个简单的方法，但我无法理解它。我已经为我的按钮获得了下面的代码，但即使按钮样式正确，我也似乎无法使用悬停工作：

.eventmark .upcomming_bg {
background: #1178bd;
  background-image: -webkit-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: -moz-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: -ms-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: -o-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: linear-gradient(to bottom, #1178bd, #0c3c5c);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 11px;
  text-decoration: none;
}
.eventmark.upcoming.bg:hover{
 background: #3d7a80;
 background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
 background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
 background: -o-linear-gradient(top, #3d7a80, #2f5f63);
 background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
 background: linear-gradient(top, #3d7a80, #2f5f63);
}

请帮忙。

Answer 1

第一个代码块中的两个类之间有空格，但第二个代码块中没有空格。所以，选择器是不同的。

Answer 2

eventmark.upcoming.bg

你确定那里没有空格吗？这相当于

<div class="eventmark upcoming bg">

分配给同一元素的所有类。

Answer 3

错字错误：在2个地方更正

.eventmark.upcomming.bg {
  background: #1178bd;
  background-image: -webkit-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: -moz-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: -ms-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: -o-linear-gradient(top, #1178bd, #0c3c5c);
  background-image: linear-gradient(to bottom, #1178bd, #0c3c5c);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 11px;
  text-decoration: none;
}
.eventmark.upcomming.bg:hover{
 background: #3d7a80;
 background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
 background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
 background: -o-linear-gradient(top, #3d7a80, #2f5f63);
 background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
 background: linear-gradient(top, #3d7a80, #2f5f63);
}

CSS按钮悬停不起作用

3 个答案: