时间戳

首页 > 解决方案 > 我有两个不同的按钮，但 CSS 将第二个 HTML 按钮的悬停颜色应用于第一个。你如何解决这个问题？

html - 我有两个不同的按钮，但 CSS 将第二个 HTML 按钮的悬停颜色应用于第一个。你如何解决这个问题？

问题描述

我试图有两个不同颜色的按钮。当我尝试时，它使“.hicodestled”的悬停颜色成为“.styled”的悬停颜色。此外，“.hicodestled”按钮在悬停时只是空闲。尝试添加不同的类时，它仍然无法区分两个按钮。

.styled {
  float: right;
  border: 0;
  line-height: 1.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(0, 220, 0, 1);
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
  background-color: rgba(0, 255, 0, 1);
}

.styled:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.hicodestled {
  float: right;
  border: 0;
  line-height: 1.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(0, 220, 220, 1);
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
  background-color: rgba(0, 220, 220, 1);
}

.styled:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
<a href="http://point90.42web.io" style="text-decoration: none;">
  <font color="#ffffff">
    <button class="styled" type="button">
    <b>Back up</b>
</button>
    <button class="hicodestled" type="button">
    <b>View code</b>
</button>
  </font>
</a>

编辑：我现在意识到这是一个垃圾问题，因为我没有看 CSS。

标签： htmlcss

解决方案

这似乎是覆盖 hicodestled 按钮类的问题。在下面的代码中，我更改了悬停颜色并替换了 hicodestled 的第二个样式按钮声明。代码按现在应该的方式工作，但颜色当前设置为红色和较深的绿色以进行测试。我建议你根据你的需要改变这些。

   <style>
  .styled {
    float: right;
    border: 0;
    line-height: 1.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(0, 220, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: red
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}
  
    .hicodestled {
    float: right;
    border: 0;
    line-height: 1.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(0, 220, 220, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.hicodestled:hover {
    background-color: green;
}

.hicodestled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}
</style>
<a href=http://point90.42web.io style=text-decoration:none><font color=#ffffff>
  <button class="styled"
        type="button">
    <b>Back up</b>
</button>
    <button class="hicodestled"
        type="button">
    <b>View code</b>
</button>
</font></a>

推荐阅读