懸停，格邊框顯示，儘管相同的CSS非懸停

我訂閱頁面（軌道4，引導3）在那裏我設置以下的div：懸停，格邊框顯示，儘管相同的CSS非懸停

<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縮略圖：hover和.IMG縮略圖，唯一不同的是背景色（白色VS灰色）和箱陰影（灰色VS藍色）。

我的問題是，當我將鼠標懸停在其中一個img縮略圖框上時，底層div容器的輪廓在高亮框的右側可見（看起來像是兩側的欄杆，但是下面的圖片），在左側更明顯： enter image description here

這些輪廓是不可見的，當盒子是不突出：

enter image description here

如何隱藏這個綱要？

來源

2014-03-05 dmt2989

你能設置一個顯示問題的[jsFiddle]（http://jsfiddle.net/）嗎？因爲我編譯了你的sass（在我修復的ln48上有一個缺失的'}'），它看起來像工作正常：http://jsfiddle.net/K8QUp/ – Ming

我創建了一個小提琴[鏈接]（http：// jsfiddle .net/ns1/RNAMM /），但是這個問題在jsFiddle上不可見。 – dmt2989

呃......抱歉要生硬，但那不是很有用，是嗎？ :)你有鏈接到這個頁面發生這種情況嗎？ – Ming

我以前也有這個問題，我固定它通過加入剩餘的子類：鏈接，訪問和積極的，你的情況，你必須定義是這樣的：

.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; 
}

請記住，一旦懸停是觸發後，它不會自動回落到您定義的默認狀態。

來源

2014-03-05 01:14:42

實施此解決方案後，我仍然看到任何一方的導軌。 – dmt2989

：hover是一個僞類，意思是它是一個元素的特殊狀態。當懸停被「觸發」時，它將處於懸停狀態，但是當你沒有懸停在該元素上時，其狀態將是默認狀態。添加：link，：visited和：active僞類不應影響：懸停，因爲它們是獨立狀態。 –

懸停，格邊框顯示，儘管相同的CSS非懸停

回答

相關問題