当我在我的 div 中添加文本时,悬停效果发生了变化。悬停效果是为了增加边框宽度,但它开始移动同一行中的其他 div。如果我只从一行中出现的所有 div 的 ONE div 中删除文本,悬停效果就可以了。但它仍然存在于下一行。
fiddle 是http://jsfiddle.net/u716vyoL/1/
这是我的代码: CSS
<style type="text/css">
.ProcOuterDiv{
#margin:4px 5px 4px 5px;
display:inline-block;
height:26px;
width:26px;
}
.Proc{
margin:2px 2px 2px 2px;
height:23px;
width:23px;
#padding:2px 2px 2px 2px;
border: 2px solid #A3A0FA;
border-radius: 1px;
text-align:center;
}
.Proc:hover{
border: 3px solid #F77C60;
border-radius: 5px;
cursor:pointer;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(252, 69, 69, 0.8) !important;
}
</style>
HTML:
<div class="ProcOuterDiv"><div data-val1="1" onclick="SelectProc(this);" class="Proc">Cr</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="2" onclick="SelectProc(this);" class="Proc">Br</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="3" onclick="SelectProc(this);" class="Proc">Ca</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="4" onclick="SelectProc(this);" class="Proc">Fill</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="5" onclick="SelectProc(this);" class="Proc"></div></div><!--
--><div class="ProcOuterDiv"><div data-val1="6" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="7" onclick="SelectProc(this);" class="Proc">RC</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="8" onclick="SelectProc(this);" class="Proc">Den</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="9" onclick="SelectProc(this);" class="Proc">MOB</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="10" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="11" onclick="SelectProc(this);" class="Proc">SP</div></div>
最佳答案
- 在您的代码中,div.Proc 的默认边框宽度为 2px,而 OnHover 将边框宽度增加 1px,因此元素的边框和两个元素之间的间距有抖动。
- 在您的代码中,您仅在悬停时应用阴影,但我提供默认阴影并且颜色是透明的,并且在悬停时颜色会发生变化。真好看!
HTML
<div class="ProcOuterDiv"><div data-val1="1" onclick="SelectProc(this);" class="Proc">Cr</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="2" onclick="SelectProc(this);" class="Proc">Br</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="3" onclick="SelectProc(this);" class="Proc">Ca</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="4" onclick="SelectProc(this);" class="Proc">Fill</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="5" onclick="SelectProc(this);" class="Proc"></div></div><!--
--><div class="ProcOuterDiv"><div data-val1="6" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="7" onclick="SelectProc(this);" class="Proc">RC</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="8" onclick="SelectProc(this);" class="Proc">Den</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="9" onclick="SelectProc(this);" class="Proc">MOB</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="10" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="11" onclick="SelectProc(this);" class="Proc">SP</div></div>
CSS
<style type="text/css">
.ProcOuterDiv{
#margin:4px 5px 4px 5px;
display:inline-block;
height:26px;
width:26px;
}
.Proc{
margin:2px 2px 2px 2px;
height:23px;
width:23px;
#padding:2px 2px 2px 2px;
border: 3px solid #A3A0FA;
box-shadow: 0px 1px 1px transparent inset, 0px 0px 8px transparent;
border-radius: 1px;
text-align:center;
}
.Proc:hover{
border: 3px solid #F77C60;
border-radius: 5px;
cursor:pointer;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(252, 69, 69, 0.8);
}
关于html - 添加文本内容后div悬停效果改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25911461/