Question

css代码我为每个效果添加了图像..

#button3
   { border:none;
    outline:none;
    width:262px;
     height:66px;
     background:url("settings_button1.png");
     position:absolute;
     margin-left:515px;
     }
#button3:hover
 {
    width:262px;
     height:66px;
     background:url("settings_button2.png");
     } 
#button3:focus
   {

  width:262px;
     height:102px;
     background:url("settings_button3.png");
     }

HTML代码

<html>
 <head>
  </head>
   <body>
     <input type="button" id="button3">
    </body>
   </html>

它的工作正常，但是一旦我点击屏幕上的其他地方，我就不想要掉落箭头了..

Answer 1

您可以使用jquery处理它。将此行添加到您的js文件中。

$('input').on('focusout', function(){
    $(this).height('102px');
})

http://jsfiddle.net/nku0thj3/

Answer 2

$('input').on('focusout', function(){
     $(this).height('102px');
     $(this).css("background-color","blue");
})

$('input').on('focus', function(){
     $(this).height('102px');
     $(this).css("background-color","blue");
})

使用您的图片而不是背景颜色。

See the Demo here.

单击屏幕上的某个位置后，菜单按钮消失

2 个答案: