マウスオーバーでアイコンを表示する

UI/UX

最近はUIのことを仕事でやってるので、
どんなものがいいのかをいろいろ試している。
マウスオーバーでアイコンが表示されるようにしてみた。

(function($){
    $('.post').mouseover(function(e){	
	$($(e.target).find('img')).css('visibility','visible');
    });

    $('.post').mouseout(function(e){
	if($(e.target).attr('class') == 'post'){	   
            $('.poke').css('visibility','hidden');
          //$($(e.target).find('img')).css('visibility','hidden');
	}
    });

    $('.poke').mouseover(function(e){
	var $target = $(e.target);
	if($target.is('img')){
  	  $($(e.target).find('img')).css('visibility','visible');	
	}
    });

    $('#tw').click(function(e){
	$('.twitter').parent().parent().fadeToggle('slow','linear');
    });

    $('#fa').click(function(e){
	$('.facebook').parent().parent().fadeToggle('slow','linear');
    });

})($);
<!DOCTYPE html>
<html>
<head>
<title>mock</title>
<meta charset="utf-8">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body{
background-color:#2C4762;
}

.post{
background-color:#ffffff;
border:solid 1px #ffffff;
border-radius:0.5em;
margin-bottom:10px;
padding:0 0 0 10px;
}

ul{
list-style:none;
}
</style>

</head>
<body>

<ul>
<li><img src="./twitter.png" id="tw" width="26" height="26"></li>
<li><img src="./facebook.png" id="fa"  width="26" height="26"></li>
</ul>


<div class="post">
<div class="content">
<p>こんばんは</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
<img src="./twitter.png" width="26" class="twitter" height="26">
</div>
</div>

<div class="post">
<div class="content">
<p>雨ですね</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
<img src="./facebook.png" class="facebook" width="26" height="26">
</div>
</div>

<div class="post">
<div class="content">
<p>フェレット好き！</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
</div>
</div>

<div class="post">
<div class="content">
<p>こんばんは</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
<img src="./twitter.png" width="26" class="twitter" height="26">
</div>
</div>

<script src="./p.js"></script>
</body>
</html>