Выбор при наведении на картинку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Выбор при наведении на картинку by ПафНутиЙ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">

  $(function (){
    $("div[id^=img_]").hover(function(){
        $(this).find(".buttons").fadeIn(200);
    }, function () {
        $(this).find(".buttons").fadeOut(200);
        $(this).find(".show_short").fadeOut(100);
    })

    $("a[id^=short_]").click(function(){
        $(this).parent().parent().find(".show_short").fadeIn(100);
    })


  })

  </script>
  <style type="text/css">
  .img_show {
    width: 200px;
    height: 200px;
    position: relative;
    border: solid 1px #ccc;
    float: left;
    margin: 20px;
      }
    .img_show img {
        z-index: -1;
        width: 200px;
        }
        .show_short {
            z-index: 100;
            position: absolute;
            top: 0;
            right: -120px;
            width: 100px;
            height: 180px;
            background: #000000;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 10px;
            display: none;
            }

  .buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: none;
      }
      .buttons a {
        display: block;
        background: #fff;
        margin-bottom: 5px;
          }

  </style>
</head>

<body>
<div id="img_1" class="img_show">
    <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
    <div id="but_1" class="buttons">
        <a href="/full/" id="full_1">полная новость</a>
        <a href="#" id="short_1">короткая новость</a>
    </div>
    <div id="short_story_1" class="show_short">Тут всякий текст,&nbsp;который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<div id="img_2" class="img_show">
    <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
    <div id="but_2" class="buttons">
        <a href="/full/" id="full_2">полная новость</a>
        <a href="#" id="short_2">короткая новость</a>
    </div>
    <div id="short_story_2" class="show_short">Тут всякий текст,&nbsp;который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<div id="img_3" class="img_show">
    <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
    <div id="but_3" class="buttons">
        <a href="/full/" id="full_3">полная новость</a>
        <a href="#" id="short_3">короткая новость</a>
    </div>
    <div id="short_story_3" class="show_short">Тут всякий текст,&nbsp;который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<br clear="all" />
<p>Специально для <a href="http://dle-faq.ru/" title="dle-faq.ru">dle-faq.ru</a></p>
</body>

</html>