Question

当我将鼠标悬停在一个按钮上时，我试图将它变为现实，背景从普通灰色变为CSS样式的渐变事物.....这一切都有效，除了当我将鼠标悬停在按钮上时，背景保持灰色，而不是改为渐变。（我不好用措辞句子，对不起）但是我试着这样做而且它没有用，所以如果你能帮助我，我会很感激。< / p>

HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'/>
  <script src='script.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
  <div class='TopBar'>
    <div id='TopBar_Nav'>
      <center>

      <input type='button' class='TBNP' id='TBN-1' value='Player Statistics'>
      <!---->
      <input type='button' class='TBNP' id='TBN-2' value='Player Inventory'>

      </center>
    </div>
  </div>

  <div class='Main'>

  </div>
</body>
</html>

CSS：

.TBNP {
  border-radius: 4px;
  border: 1px solid black;
  color: gray;
  background-color: #EDEDED;
  transition: 0.5s;
}

.TBNP:hover {
  border-radius: 10px;
  color: black;
  border: 1px solid black;
  background-color: linear-gradient(to bottom right, red, yellow);
  cursor: pointer;
}

Answer 1

使用background-image代替background-color渐变。

＆＃13;

.TBNP {
  border-radius: 4px;
  border: 1px solid black;
  color: gray;
  background-color: #EDEDED;
  transition: 0.5s;
}

.TBNP:hover {
  border-radius: 10px;
  color: black;
  border: 1px solid black;
  background-image: linear-gradient(to bottom right, red, yellow);
  cursor: pointer;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'/>
  <script src='script.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
  <div class='TopBar'>
    <div id='TopBar_Nav'>
      <center>

      <input type='button' class='TBNP' id='TBN-1' value='Player Statistics'>
      <!---->
      <input type='button' class='TBNP' id='TBN-2' value='Player Inventory'>

      </center>
    </div>
  </div>

  <div class='Main'>

  </div>
</body>
</html>

＆＃13;

对于渐变过渡，请参阅Use CSS3 transitions with gradient backgrounds。

Answer 2

linear-gradient应与background-image一起使用，而不是background-color。

如何将CSS渐变放在＆＃39; background-color＆＃39;？

2 个答案: