Question

我想在按钮文本和图标悬停时更改字体颜色背景颜色。

body {
  background-color: black;
}

.button {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 2em;
  color: #eff6f9;
  display: inline-block;
  font-family: Merriweather, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background-color 0.125s ease-in;
  margin-top: 3em;
}

.button a {
  font-size: 2em;
  text-decoration-line: none;
  color: black;
  text-decoration: none
}

.button:hover,
.button:focus,
.button:active {
  background-color: transparent;
  border-color: white;
  color: white;
}

.shop:hover>span,
.shop:focus>span,
.shop:active>span {
  color: white;
}

a:focus,
.button a:hover {
  text-decoration: none;
}

<body>
<div class="button" id="bu">
  <a class="shop" href="https://app.nmpl.store/">
    <span>Order Now</span>
    <i class="fas fa-shopping-cart"></i>
  </a>
</div>

当前，当我将鼠标悬停在按钮上时，仅边框会先变化，然后按钮之间的文本会发生变化，当我也将鼠标悬停在边框上时，我想更改整个按钮的颜色和背景。

指针在外部按钮

按钮边缘的指针

文字指针

Answer 1

一个很好的例子，说明对正确的工作使用正确的元素为什么很重要。不要在不需要它们的地方使用div。

摆脱div并使用您设置样式的简单链接元素看起来像按钮。

body {
  background-color: black;
}

.button {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 2em;
  display: inline-block;
  font-family: Merriweather, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background-color 0.125s ease-in;
  margin-top: 3em;
  text-decoration-line: none;
  text-decoration: none;
  color: black;
}


.button:hover,
.button:focus,
.button:active {
  background-color: transparent;
  border-color: white;
  color: white;
}

a:focus {
  text-decoration: none;
}

<a class="button" href="https://app.nmpl.store/">
  <span>Order Now</span>
  <i class="fas fa-shopping-cart"></i>
</a>

Answer 2

尝试下面的代码段在这里，我改变了

.shop:hover>span,
.shop:focus>span,
.shop:active>span {
  color: white;
}

收件人

.shop:hover>a>span,
.shop:focus>a>span,
.shop:active>a>span {
  color: white;
}

.button {
  background-color: white;
  border: 2px solid transparent;
  border-radius: 2em;
  color: #eff6f9;
  display: inline-block;
  font-family: Merriweather, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background-color 0.125s ease-in;
  margin-top: 3em;
}

.wrapper{
  height:200px;
  width:200px;
  padding:10px;
  background-color:yellow;
}

.button a {
  font-size: 2em;
  text-decoration-line: none;
  color: black;
  text-decoration: none
}

.button .fa-w-18 {
  color: black;
  margin-left: 5px;
}

.button:hover,
.button:focus,
.button:active {
  background-color: transparent;
  border-color: white;
  color: white;
}

.shop:hover>.fa-w-18,
.shop:focus>.fa-w-18,
.shop:active>.fa-w-18 {
  color: white;
}

.button:hover>a>span,
.button:focus>a>span,
.button:active>a>span {
  color: white;
}

a:focus,
.button a:hover {
  text-decoration: none;
}

<div class="wrapper">
  <div class="button" id="bu">
    <a class="shop" href="https://app.nmpl.store/">
      <span>Order Now</span>
      <i class="fas fa-shopping-cart"></i>
    </a>
  </div>
</div>

Answer 3

我刚刚在代码中做了几处更改： HTML

<body>
    <div id="bu">
    <a class="shop button" href="https://app.nmpl.store/">
        Order Now <i class="fas fa-shopping-cart"></i>
    </a>
</div>

CSS

body {
   background-color: black;
}

.button {
   background-color: white;
   border: 2px solid #FFF;
   border-radius: 35px;
   color: #000;
   display: inline-block;
   font-family: Merriweather, Arial, sans-serif;
   font-weight: 300;
   font-style: italic;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 1px;
   line-height: 1;
   text-decoration:none;
   padding: 20px 30px;
   text-shadow: none;
   transition: background-color 0.125s ease-in;
   margin-top: 3em;
}

.button:hover,
.button:focus,
.button:active {
    background-color: transparent;
    border-color: white;
    color: white;
}

希望对您有帮助：）

如何在悬停时更改按钮样式？

3 个答案: