html - 悬停时，显示 div 边框，尽管 CSS 与非悬停时相同

Question

我有订阅页面(rails 4，bootstrap 3)，我在其中设置了以下 div:

<ul class="thumbnails koudoku-pricing-table">
  <% @plans.each do |plan| %>
    <li class="col-md-3 plan <%= 'plan-primary' if plan.highlight? %>">
      <div class="img-thumbnail">
        <div class="caption"> 
          <h3><%= plan.name %></h3>
          <h4><%= plan_price(plan) %></h4>
          <div class="call-to-action">

我的类的 CSS 是:

ul.koudoku-pricing-table {

  position: relative;
  margin: 20px 0;
  margin-left: 25px;
  list-style-type: none;


  li.plan {

    text-align: center;
    padding: 0; 
    background-color: #ffffff;
    margin-top: 17px;
    margin-left: 0;
    margin-right: 0;
    z-index: 99;


    &.plan-primary {
      background-color: #ffffff;
      margin-top: 0px;
      padding: 0;
      margin-left: 0px;
      margin-right: 0px;
      z-index: 100;
    }

      h3 {
        font-size: 32.5px;
        line-height: 51px;
      }
      h4 {
        line-height: 22px;
      }
      a, input[type=submit] {
        font-size: 21.5px;
        line-height: 26px;
      }
      ul.features {
        padding: 0 1em;
        margin-bottom: 12px;
        li {
          font-size: 12pt;
        }

    }


    .call-to-action {
      margin: 10px 0;
    }

    .features {
      padding: 0;
      margin: 0;
      li {
        list-style: none;
        padding: 8px;
        line-height: 18px;
        vertical-align: top;
        border-top: 1px solid #dddddd;
      }
      li:first-child {
        border-top: none;
      }
    }

  }


  .social-proof {
    padding: 17px 0;
    blockquote {
      h2, h3, h4 {
        padding: 5px 0;
      }
    }
  }

  .img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 0px;
  line-height: 1.428571429;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
  -moz-box-shadow: 0 0 12px 3px #b0b2ab;
  -webkit-box-shadow: 0 0 12px 3px #b0b2ab;
  box-shadow: 0 0 12px 3px #b0b2ab;
}


.img-thumbnail:hover {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 0px;
  line-height: 1.428571429;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
  -moz-box-shadow: 0 0 12px 3px #3399f3;
  -webkit-box-shadow: 0 0 12px 3px #3399f3;
  box-shadow: 0 0 12px 3px #3399f3;
}


.thumbnail .caption {
  padding: 0px;
  color: #666666;
}
}

如您所见，对于 .img-thumbnail:hover 和 .img-thumbnail，唯一的区别是背景颜色(白色与灰色)和框阴影(灰色与蓝色)。

我的问题是，当我将鼠标悬停在其中一个 img-thumbnail 框上时，底层 div 容器的轮廓在突出显示框的左侧和右侧可见(看起来像两边的栏杆，但更多在下图中的左侧可见):

当框未突出显示时，这些轮廓不可见:

如何隐藏这个轮廓？

Answer 1

我以前遇到过这个问题，我通过添加剩余的子类来修复它:link、visited 和 active，在你的情况下，你必须定义如下内容:

.img-thumbnail:link {
display: inline-block;
height: auto;
max-width: 100%;
padding: 0px;
line-height: 1.428571429;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-moz-box-shadow: 0 0 12px 3px #b0b2ab;
-webkit-box-shadow: 0 0 12px 3px #b0b2ab;
box-shadow: 0 0 12px 3px #b0b2ab;
}

请记住，一旦悬停被触发，它不会自动回退到您定义的默认状态。