悬停时更改按钮边框

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

悬停时更改按钮边框

Change button border on hover

html

css

border

button

hover