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.

@AndreyFedorov Agreed, there is ZERO reason to wrap the input in a link...especially one that doesn't go anywhere. — Paulie_D, Jul 26 '16 at 20:50

score 2 · Answer 1 · answered Jul 26 '16 at 19:06

2

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>

answered Jul 26 '16 at 19:06

mosesmeirelles

427
3
7

This works dandy but the :visited doesn't work it the image still remains. And ideas? – Gmanc2 Jul 26 '16 at 20:57
@Gmanc2 I've been trying to solve that problem, and discovered it's a feature of newest browsers versions, according to this [question](http://stackoverflow.com/questions/10320351/problems-with-avisited). I changed the style to get `:visited` of your anchor like that `a:visited #button1 { width: 0 !important; height: 0 !important; }` It will not change the attributes of width and height, how the new security says at this [link](https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/) – mosesmeirelles Jul 27 '16 at 12:55

score 0 · Answer 2 · answered Jul 26 '16 at 19:08

0

You need to add !important after your css style changes to overwrite inline styles.

answered Jul 26 '16 at 19:08

Trevor

1

score 0 · Answer 3 · answered Jul 26 '16 at 19:14

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>

score 0 · Answer 4 · answered Jul 26 '16 at 20:04

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>

CSS button image :hover

4 Answers4

try this