[備忘録]特定要素マウスオーバー時にボタン表示

やりたいこと

初期状態では非表示で、特定の要素のマウスオーバーでボタンをフワッとうっすら表示させる

ソース

HTML
Divのマウスオーバーで、×ボタン(delete-button)をフワッと表示させたい例
(jQueryは読み込んでおく)

<div id="hoge">
	<input class="delete-button" type="button" value="×">
	<p>なにかしらの表示とかほかの要素とか</p>
</div>

CSS　
×ボタンをdisplay: none;で非表示にしておく
ポジションとかは適当

.delete-button {
	display: none;
	position: absolute;
	top: 3%;
	left: 85%;
	opacity: 0.5;
}

.delete-button:hover {
	opacity: 0.9;
}

js
Div要素のhoverのアクションで、×ボタンをfadeIn/fadeOutさせる

$(hoge).hover(function() {
	$(this).children('.delete-button').fadeIn(150);
}, function() {
	$(this).children('.delete-button').fadeOut(150);
});

結果