在悬停时添加CSS边框，而不移动元素 [英] Add a CSS border on hover without moving the element

问题描述

可能重复：

CSS悬停边框使内联元素稍微调整

我有一行，我应用背景突出显示在悬停。

  .jobs .item：hover {
 background：＃e1e1e1; 
 border-top：1px solid＃d0d0d0; 
} 
  

但是，边框加上1px 额外元素，它使它'移动'。

解决方案

你使边框存在，但有边框存在如果不需要支持旧版本的IE（< 7），则与背景颜色相同（或 transparent ）。

  .jobs .item {
 background：#eee; 
 border-top：1px solid #eee; 
} 
 
 .jobs .item：hover {
 background：＃e1e1e1; 
 border-top：1px solid＃d0d0d0; 
} 
  / pre> 

  
Possible Duplicate:

  CSS hover border makes inline elements adjust slightly  
I have a row that I am applying a background highlight to on hover. 
.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}
However, as the border adds 1px additional to the element, it makes it 'move'. How would I compensate for the above movement here (without using a background image)?
解决方案
You make the border exist but having it the same color as the background (or transparent if you don't need to support older versions of IE (< 7).
.jobs .item {
    background: #eee;
    border-top: 1px solid #eee;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}


                        
这篇关于在悬停时添加CSS边框，而不移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！