悬停时更改按钮边框

Question

我无法让悬停在我的按钮上工作。我希望我的按钮没有边框，但是当我的鼠标在它上面时显示一个蓝色边框。当鼠标不在顶部但已排序时，我还需要它来更改图像，因此 changeImage 函数:)。只是需要边界方面的帮助，有什么建议吗？

HTML

<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda"
/>

CSS

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;
  
  .button:hover {
        border:2px solid #0000ff;
        border-radius: 20px;
            }

Answer 1

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;
  }
  .button:hover {
        border: 2px solid  blue;
        border-radius: 20px;
        cursor:pointer;
            }

<input type="button" class = "button"   value="Panda"
/>

Answer 2

缺少右括号 }

.button {
  margin-right: 20px;
  width:300px;
  height:300px;
  background-color: transparent;
  border:none;
}
  
.button:hover {
  border:2px solid #0000ff;
  border-radius: 20px;
}

<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda" />

Answer 3

如果您将右括号添加到您的 css 规则 button，则会出现悬停边框。你只是错过了;-)

关于图像的更改，我不确定我是否理解正确……但最后：没有 JS 代码就不能说太多了。如果您可以显示 JS 代码，这将是有帮助的 ;-)

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;

} /* <<< add missing bracket here */
  
  .button:hover {
        border:2px solid #0000ff;
        border-radius: 20px;
            }