CSS button image :hover
Question
<!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>
Does anyone have an Idea why the on hover event doesn't work? Im not sure why its not srinking the button to size 0,0 or why it doesnt on hover enlarge it.
4 answers
solution1
2 2016-07-26 19:06:46
You should remove your inline style from input element:
<input type="image" id="button1" src="button.png" />
Inline styles have priority over declared styles, including your :hover 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; }
<!doctype html> <title>Site Maintenance</title> <body> <article> <div> <a href="test"><input type="image" id="button1" src="button.png" /></a> </div> </article> </body>
solution2
0 2016-07-26 19:08:42
在更改CSS样式后，需要添加！important以覆盖嵌入式样式。
solution3
0 2016-07-26 19:14:27
Seems don't work because the type='image' don't change try using a type='button' like in the sample below
<!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>
solution4
0 2016-07-26 20:04:26
try this
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Image with Animation CSS + Submit Button Hover
CSS Image Hover Help
Hover effect on image and button
button hover with image animation
css trick buttons on hover on a button
Fix button styling on CSS hover?
CSS Color Overlay on Image Hover
Wordpress CSS Hover Image as Widget?
html image maps and hover css
Image hover transition on table - CSS
Related Tags