Question

在悬停时，文本正在调整div，我只想增加边框的大小，除此之外它还调整了div的窗口，任何人都可以帮助我。有什么我可以这样做，我的div和文本保持静态但边框大小变为3px。另外我想用css做，而不是js只是简单的CSS。任何人帮助我，我应该使用哪个标签和哪个类。这是因为我曾经使用的引导程序或者为什么我得到这个错误的主要问题是什么，我不知道。如果有人可以提供帮助，这将对我有很大的帮助，因为我必须完成这个。

这是一个片段：

＆＃13;

.org-text-box {
  padding: 25px 9px 13px 29px;
  width: 290px;
  display: inline-block;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(204, 204, 204, 1);
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.org-text-box:hover {
  border-width: 3px;
  border-color: rgba(4, 27, 71, 1);
}

＆＃13;

<div class="col-md-2 org-text-box">
  <div class="col-md-12">
    <span style="font-size:14px;font-weight:700;text-align:center; line-height:20px;"><center>Unité de Conseil et d’audit interne (UCAI)</center></span>
  </div>
  <div class="" style="font-size:14px; font-weight:400; margin-top:50px; ">
    <center>
      <span>L'Unité de Conseil et d'Audit Interne a pour attributions principales d'assurer l'audit interne de l'IGF et de donner suite à tout mandat ponctuel confié par le Ministre de l'Économie et des Finances ou son délégataire. Elle procède également à l’évaluation des politiques publiques.
    </span>
      <span style="font-weight:700;font-style:italic;">(cf. Article 12 du décret du 17 mars 2006)</span>
    </center>
  </div>
</div>

＆＃13;

Answer 1

边框影响元素尺寸，这就是您看到元素移动的原因。避免这种情况的一种方法是使用具有零像素模糊的插入框阴影和两个像素扩展来模拟边框的外观：

＆＃13;

.org-text-box {
  padding: 25px 9px 13px 29px;
  width: 290px;
  display: inline-block;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(204, 204, 204, 1);
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.org-text-box:hover {
  border-color: rgba(4, 27, 71, 1);
  box-shadow: inset 0 0 0 2px rgba(4, 27, 71, 1);
}

＆＃13;

<div class="col-md-2 org-text-box">
  <div class="col-md-12">
    <span style="font-size:14px;font-weight:700;text-align:center;
             line-height:20px;">
             <center> Unité de Conseil et d’audit interne (UCAI)</center>
            	</span>
  </div>
  <div class="" style="font-size:14px; font-weight:400; 
                  margin-top:50px; ">
    <center> <span>
            L'Unité de Conseil et d'Audit Interne a pour attributions principales d'assurer l'audit interne de l'IGF et de donner suite à tout mandat ponctuel confié par le Ministre de l'Économie et des Finances ou son délégataire. Elle procède également à l’évaluation des politiques publiques.
    </span>
      <span style="font-weight:700;font-style:italic;"> 
                   (cf. Article 12 du décret du 17 mars 2006)</span>
    </center>
  </div>
</div>

＆＃13;

Answer 2

如果您想使用边框，则只能使用border-color：

＆＃13;

div {
  border: 5px solid transparent;
  padding: 10px;
  background-color: #eaeaea;
}

div:hover {
  border-color: black;
}

＆＃13;

<div>Yep yep yep yep</div>

＆＃13;

或者，您可以使用outline，因为它不会影响元素大小。

＆＃13;

div {
  padding: 10px;
  background-color: #eaeaea;
}

div:hover {
  outline: 5px solid black;
}

＆＃13;

<div>Yep yep yep yep</div>

＆＃13;

Div在hover css上调整大小？

2 个答案: