一旦我点击屏幕上的某个地方，菜单按钮就会消失

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.

一旦我点击屏幕上的某个地方，菜单按钮就会消失

Menu button vanishes once i click somewhere on the screen

html

css

java

jsp