CSS按鈕圖片：懸停
[英]CSS button image :hover
問題描述
<!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或為什么沒有將其放大。
4 個解決方案
解決方案1
2 2016-07-26 19:06:46
您應該從輸入元素中刪除內聯樣式：
<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>
解決方案2
0 2016-07-26 19:08:42
在更改CSS樣式后，需要添加！important以覆蓋嵌入式樣式。
解決方案3
0 2016-07-26 19:14:27
似乎不起作用，因為type ='image'不變，請嘗試使用type ='button'，如以下示例所示
<!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 {
min-width: 300px;
min-height: 74px;
}
#button1:visited {
width: 0px;
height: 0px;
}
#button2 {
height: 50px;
width: 250px;
}
#button2:hover {
background-color : yellow;
min-width: 300px;
min-height: 74px;
}
#button2: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>
<div>
<a href="test">
<input type="button" id="button2" value='TEST' style="height:50px; width:250px;" src="button.png" />
</a>
</div>
</article>
</body>
解決方案4
0 2016-07-26 20:04:26
嘗試這個
https://jsfiddle.net/fnkq0b7r/2/
<!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 img{
height: 50px;
width: 250px;
}
#button1:hover img{
width: 300px;
height: 74px;
}
</style>
<body>
<div>
<a href="test" id="button1">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</a>
</div>
</body>
帶有動畫CSS的圖像+提交按鈕懸停
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.