html - Bootstrap悬停功能及边框显示

Question

我正在尝试创建一个带有图像的小面板，并试图为它弄清楚两件事。我似乎无法让图像周围的边框适合它。有一个小间隙，我希望边框适合图像。我还想要它，以便当用户将鼠标悬停在图像上时，图像周围的边框会变成黄色。出于某种原因，我似乎无法让这两件事发挥作用。在这件事上的任何帮助都会很棒

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">

   <div class="pull-left col-xs-12 col-sm-6 col-md-6">
                <a href="/recipes/arthritis-soother-36">

                       <img class="img-thumbnail img-responsive media-object" src=http://www.bodybysimone.com/wp-content/uploads/green-juice-mbd108052_vert.jpg >

                </a>
            </div>

    </div>
     <div class="panel-footer">Panel Footer</div>
  </div>
</div>

.panel-default{
  width: 500px;
}

.panel-body hover{
   background-color: yellow;
   border size: 20px;
}

Fiddle

Answer 1

更新你的CSS

.panel-default{
  width: 500px;
}
.panel-body .img-thumbnail{padding:0px;border:1px solid transparent} /*remove padding and add transparent border*/
.panel-body:hover  .img-thumbnail{
   border-color: yellow; /*change the transparent border to yellow*/
   border size: 20px;
}

DEMO