javascript - 填充不断插入相关元素

Question

我有一个带有 text-align:center 的 div 和 3 个带有文本的 span。我也有设置填充、背景颜色和边框的鼠标悬停事件。但是当这样做时，它会插入其他 2 个跨度。这是一个 jsfiddle，可以更好地可视化。

http://jsfiddle.net/93EBu/

<div id="div">
   <span class="span">Word</span>
   <span class="span">Word</span>
   <span class="span">Word</span>
</div>



   #div {
       text-align:center;
   }

   .span {
       margin: 0px 5%;
   }

   .spanhover {
       border:1px solid blue;
       background-color:lightblue;
       padding:5px;
   }

Answer 1

您可以从 .spanhover 中删除 padding: 5px 并添加 border: 1px solid transparent 到您的 span 元素:

#div {
    text-align:center;
}
.span {
    margin: 0px 5%;
    border: 1px solid transparent;
}
.spanhover {
    border:1px solid blue;
    background-color:lightblue;
}

Fiddle Demo

此外，您可以使用 :hover 选择器，而不是在这里使用不必要的 jQuery:

span:hover {
    border:1px solid blue;
    background-color:lightblue;
}

Fiddle Demo