为什么`focus`和`hover`不能一起工作？

Question

当我在函数中仅使用focus效果中的hover时，一切正常，但是如果将它们全部放在一起，则focus不起作用，只有{{1} }正常工作。

hover

$('#button').click(function(){

$('.input').css({
	"background-color" : "#1a1a1a"
});

$('.input').focus(function() {
  $('.input').css({
    "background-color": "#333333"
  });
});

$('.input').hover(function(){
	$('.input').css({
		"background-color" : "#333333"
	});
}, function(){
	$('.input').css({
		"background-color" : "#1a1a1a"
	});
});

});

#button::after{
  content: "►";
}

.input{
  background-color: #5996ff
}