<!doctype html>
<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; background: #666a73; }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
#button1 {
height: 50px;
width: 250px;
}
#button1:hover {
width: 300px;
height: 74px;
}
#button1:visited {
width: 0px;
height: 0px;
}
</style>
<body>
<article>
<div>
<a href="test"><input type="image" id="button1"
style="height:50px;width:250px;" src="button.png" /></a>
</div>
</article>
</body>
有没有人知道为什么悬停事件不起作用？我不确定为什么它不将按钮缩小到 0,0 大小，或者为什么它不在悬停时放大它。
最佳答案
您应该从 input 元素中删除内联样式:
<input type="image" id="button1" src="button.png" />
内联样式优先于声明的样式，包括您的 :hover 样式。
body { text-align: center; padding: 150px; background: #666a73; }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
#button1 {
height: 50px;
width: 250px;
}
#button1:hover {
width: 300px;
height: 74px;
}
#button1:visited {
width: 0px;
height: 0px;
}<!doctype html>
<title>Site Maintenance</title>
<body>
<article>
<div>
<a href="test"><input type="image" id="button1" src="button.png" /></a>
</div>
</article>
</body>关于javascript - CSS 按钮图像 :hover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38597927/