Html 悬停时更改按钮边框

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

HTML

。按钮{
右边距：20px；
宽度：300px；
高度：300px；
背景色：透明；
边界：无；
}
.按钮：悬停{
边框：2件纯蓝；
边界半径：20px；
光标：指针；
}

---

缺少右括号}

。按钮{
右边距：20px；
宽度：300px；
高度：300px；
背景色：透明；
边界：无；
}
.按钮：悬停{
边框：2px实心#0000ff；
边界半径：20px；
}

---

如果将右括号添加到css规则

按钮中，则悬停边框将出现。你只是错过了；-）

关于图像的变化，我不确定我是否理解正确。。。但是最后：如果没有JS代码，我们就不能对它说太多了。在这里，如果您可以显示JS代码，那将非常有帮助；-）

。按钮{
右边距：20px；
宽度：300px；
高度：300px；
背景色：透明；
边界：无；
}/*你忘记了
}
中的结束语。
按钮

我向上帝发誓，我太傻了，没有一个结束语括号。谢谢大家！我向上帝发誓我是如此愚蠢。谢谢你，解决了。图像更改我排序，没有必要张贴的js。谢谢

<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"
/>

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

.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;
            }