我无法让我的悬停在我的按钮上工作。我希望我的按钮没有边框,但是当我的鼠标在它上面时显示一个蓝色边框。当鼠标不在顶部但已排序时,我还需要它来更改图像,因此更改图像功能:)。只是需要边境方面的帮助,有什么建议吗?
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;
}
答案 0 :(得分:0)
.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"
/>
答案 1 :(得分:0)
缺少右括号 }
.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" />
答案 2 :(得分:0)
如果您将右括号添加到您的 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;
}