Question

我有一个带有text-align：center的div和带有文本的3个跨度。我还有鼠标悬停事件，设置填充，背景颜色和边框。但是当它这样做时它会推动其他2个跨度。这是一个更好的可视化方法。

<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

您可以从padding: 5px移除.spanhover以及将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

Answer 2

尝试这个：

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

DEMO HERE：http://jsfiddle.net/93EBu/1/

您遇到此问题的原因是因为要添加到spanhover类的填充正在推送元素。所以你需要让span已经有了padding ....但是你已经添加了一个1px的边框。你需要使span填充为6px ... Padding + Border。

填充不断推动相关元素

2 个答案: