小编Sim*_*mon的帖子

情况

我正在建立一个网站,并希望有一些元素在将鼠标悬停在它们上方时创建边框/轮廓.这很简单,可以完成工作.有关参考,请参阅Stagin地区链接的临时站点.我正在使用最新bootstrap和box-sizing模型的网格部分.

问题

我发现在悬停时,正在徘徊的内容下面的内容被"推"到下一个元素下方.使用滞留区域作为参考,我可以通过CSS更改行为以在左侧或右侧修复此问题,但不能同时进行.

码

这是我用来产生效果的CSS的片段:

.hover-border:hover {
   border: 3px solid #3A3A3A;
   display: block;
}

使用此方法,除第一个元素之外的任何内容都按预期运行.如果我尝试下一个片段,第一个元素可以工作但是其他元素会破坏:

.hover-border:hover {
    border: 3px solid #3A3A3A;
    display: block;
    margin-top: -6px;
}

为了澄清有关继承的属性,我已将有问题的元素的边距/填充设置为标准行为的'0!important',直到悬停

问题

如何阻止下面的元素被推动？

这更像是对快速建议的要求,因为我发现很难相信手头的任务没有本地功能.考虑以下:

array => 
(0) => array("id" => "1", "groupname" => "fudge", "etc" => "lorem ipsum"),
(1) => array("id" => "2", "groupname" => "toffee", "etc" => "lorem ipsum"),
(2) => array("id" => "3", "groupname" => "caramel", "etc" => "lorem ipsum")
)

我期待得到的是一个新的数组,它只使用"groupname",所以会相等:

array =>
(0) => "fudge",
(1) => "toffee",
(2) => "caramel"
)

我知道实现递归遍历原始数组非常简单,但我想知道是否有更简单的方法来实现最终结果.我环顾了互联网和PHP手册,找不到任何东西

谢谢你好好读这个问题西蒙