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>

有没有人知道为什么悬停事件不起作用？我不确定为什么它没有缩小按钮大小0,0或为什么它不会悬停放大它。

Answer 1

您应该从input元素中删除内联样式：

<input type="image" id="button1" src="button.png" />

内联样式优先于声明的样式，包括:hover样式。

＆＃13;

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;
}

＆＃13;

<!doctype html>

<title>Site Maintenance</title>
<body>
<article>
<div>
<a href="test"><input type="image" id="button1" src="button.png" /></a>
</div> 
</article>
</body>

＆＃13;

Answer 2

在css样式更改后，您需要添加！important以覆盖内联样式。

Answer 3

似乎无法工作，因为类型=＆＃39;图像＆＃39;不要尝试使用类型=＆＃39;按钮＆＃39;如下面的示例

<!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>

Answer 4

试试这个

https://jsfiddle.net/fnkq0b7r/2/

ax.transAxes

CSS按钮图像：悬停

4 个答案:

试试这个