blocks|key|237044|text|将与background相同的border添加到常规项，以便看不到它。这样，无论项目是否处于悬停状态，都会有一个border:+1px。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|237045|entityMap^0|2|A|F|6|1K|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Add a <code>border</code> to the regular item, the same <code>color</code> as the <code>background</code>, so that it cannot be seen. That way the item has a <code>border: 1px</code> whether it is being hovered or not.</p>


blocks|key|238786|text|您可以使边框透明。这样它就存在了，但它是看不见的，所以它不会推动任何东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|238787|​|238788|.jobs+.item+{
+++background:+#eee;
+++border:+1px+solid+transparent;
}

.jobs+.item:hover+{
+++background:+#e1e1e1;
+++border:+1px+solid+#d0d0d0;
}|code-block|syntax|javascript|238789|<div+class="jobs">
++<div+class="item">Item</div>
</div>|238790|238791|对于已经有边框的元素，并且您不希望它们移动，您可以使用负边距：|238792|238793|.jobs+.item+{
++++background:+#eee;
++++border:+1px+solid+#d0d0d0;
}

.jobs+.item:hover+{
+++background:+#e1e1e1;
++++border:+3px+solid+#d0d0d0;
++++margin:+-2px;
}|238794|<div+class="jobs">
++<div+class="item">Item</div>
</div>|238795|238796|向现有边框添加宽度的另一个可能的技巧是添加一个具有所需像素宽度的box-shadow属性的扩展。|offset|length|style|CODE|238797|238798|.jobs+.item+{
++++background:+#eee;
++++border:+1px+solid+#d0d0d0;
}

.jobs+.item:hover+{
++++background:+#e1e1e1;
++++box-shadow:+0+0+0+2px+#d0d0d0;
}|238799|<div+class="jobs">
++<div+class="item">Item</div>
</div>|238800|238801|entityMap^0|0|0|0|0|0|0|0|0|0|0|W|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|S|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1H|8|@$V|1I|W|1J|X|Y]]|9|@]|A|$]]|$1|Z|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|F|7|1M|8|@]|9|@]|A|$G|H]]|$1|14|3|C|5|6|7|1N|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|16|$]]

<p>You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jobs"&gt;
  &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>For elements that already have a border, and you don't want them to move, you can use negative margins:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.jobs .item {
    background: #eee;
    border: 1px solid #d0d0d0;
}

.jobs .item:hover {
   background: #e1e1e1;
    border: 3px solid #d0d0d0;
    margin: -2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jobs"&gt;
  &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Another possible trick for adding width to an existing border is to add a <code>box-shadow</code> with the spread attribute of the desired pixel width.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.jobs .item {
    background: #eee;
    border: 1px solid #d0d0d0;
}

.jobs .item:hover {
    background: #e1e1e1;
    box-shadow: 0 0 0 2px #d0d0d0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jobs"&gt;
  &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3114798|text|添加margin:-1px;可以减少每一端的1px。或者，如果你只需要边框，你可以做margin-left:-1px等。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3114799|entityMap^0|2|C|M|3|16|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>add <code>margin:-1px;</code> which reduces <code>1px</code> to each side. or if you need only for side you can do <code>margin-left:-1px</code> etc.</p>


blocks|key|233257|text|试试这个，也许能解决你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|233258|Css：|233259|.item{padding-top:1px;}

.jobs+.item:hover+{
++++background:+#e1e1e1;
++++border-top:+1px+solid+#d0d0d0;
++++padding-top:0;
}|code-block|syntax|javascript|233260|HTML：|233261|<div+class="jobs">
++++<div+class="item">
++++++++content+goes+here
++++</div>
</div>|233262|有关输出，请参阅fiddle：http://jsfiddle.net/dLDNA/|offset|length|233263|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/dLDNA/^0|0|0|0|0|0|F|Q|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Try this it might solve your problem.</p>

<p>Css:</p>

<pre><code>.item{padding-top:1px;}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
    padding-top:0;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="jobs"&gt;
    &lt;div class="item"&gt;
        content goes here
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>See fiddle for output: <a href="http://jsfiddle.net/dLDNA/" rel="noreferrer">http://jsfiddle.net/dLDNA/</a></p>


<p>I have a row that I am applying a background highlight to on hover. </p>

<pre><code>.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}
</code></pre>

<p>However, as the border adds 1px <strong>additional</strong> to the element, it makes it 'move'. How would I compensate for the above movement here (without using a background image)?</p>


Add a CSS border on hover without moving the element

我有一个行，我正在悬停时应用背景高亮显示。.jobs .item:hover {    background: #e1e1e1;    border-top: 1px solid #d0d0d0;}然而，当边框将1px 额外的添加到元素时，它会使元素“移动”。我如何在这里补偿上面的移动(不使用背景图像)？

问在悬停时添加CSS边框而不移动元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在悬停时添加CSS边框而不移动元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在悬停时添加CSS边框而不移动元素
EN