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
– Paulie_D, Commented Jul 26, 2016 at 20:50

mosesmeirelles · Accepted Answer · 2016-07-26 19:06:46Z

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, 2016 at 19:06

mosesmeirelles

4273 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gmanc2 Over a year ago

This works dandy but the :visited doesn't work it the image still remains. And ideas?

mosesmeirelles Over a year ago

@Gmanc2 I've been trying to solve that problem, and discovered it's a feature of newest browsers versions, according to this question. 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

Trevor · Accepted Answer · 2016-07-26 19:08:42Z

0

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

answered Jul 26, 2016 at 19:08

Trevor

1

Comments

ScaisEdge · Accepted Answer · 2016-07-26 19:14:27Z

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>

Bharoo Jangid · Accepted Answer · 2016-07-26 20:04:26Z

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>

Collectives™ on Stack Overflow

CSS button image :hover

4 Answers 4

2 Comments

Comments

Comments

try this

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

try this

Comments

Linked

Related