Question

我在div中添加文字的那一刻，悬停效果发生了变化。悬停效果是增加边框宽度，但它开始移动同一行中的其他div。如果我从一行中出现的所有div的 ONE 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: 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>

Answer 1

this是你想要的！

我刚刚删除了＆＃39; border-radius＆＃39;财产和被取代的＆＃39; border＆＃39;属性＆＃39;大纲＆＃39;属性。

outline: 2px solid #A3A0FA;

Answer 2

在你的代码中，div.Proc的默认边框宽度为2px，而OnHover的边框宽度增加1px，因此元素在边框和两个元素之间的间距中有加速度。
在你的代码中你只在hove上应用阴影，但是我给出了默认阴影，颜色是透明的，悬停颜色会改变。好看！

jsfiddle

<强> 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);
}

添加文本内容后，div悬停效果发生了变化

2 个答案: