Question

我正在空闲时间做一些事情，这是我玩游戏的一个小选择工具，Dota2。

我已将当前情况的整个HTML输出倾注到一个小提琴：http://jsfiddle.net/a8T6L/

这有一个复选框列表和一个项目列表。这些是数字，都设置为display: table。我的想法是，当我单击一个或多个复选框时，只会显示拥有所选属性的项目。该功能尚未完成，因此如果您单击复选框，一切都将消失。只需取消选中所有内容即可再次显示。

每个项目都是<figure>，<img>和<figcaption>。在本地我用一些PHP生成整个集合，我只是复制了HTML / CSS / JavaScript，所以我可以做小提琴。

当您将鼠标悬停在某个项目上时，我试图添加边框，但在某些情况下，这会改变项目。

相关的CSS代码可以在第438行的小提琴上找到：

figure {
    text-align: center;
    display: table;
    width: 120px;
    height: 90px;
    padding: 15px auto; /* not needed unless you want centered */
    margin-top: 5px;
}

figure:hover {
    cursor: hand;
    cursor: pointer;/*Should be good with all browsers*/

    border-style: inset;
    border-color: #000;
    border-width: 1px;
}

我尝试过使用边距和填充（代码中剩下的一些），即使边框崩溃，但似乎没有任何效果。我在这里想要实现的是，当我将鼠标悬停在图形上时，插图似乎让用户知道哪个项目突出显示而没有任何移动甚至像素。只是插图出现了。

我意识到我可以用background-color代替，如果我的意图只是让用户知道哪个项目正在盘旋，但我不知道这个问题的答案。

Answer 1

发生这种情况的原因是因为它会在您悬停时在图像周围添加像素。您应该使用border: 1px solid transparent;设置初始类，以便在悬停时不添加像素，只更改边框颜色。

    figure {
        text-align: center;
        display: table;
        width: 120px;
        height: 90px;
        padding: 15px auto; /* not needed unless you want centered */
        margin-top: 5px;
        border: 1px solid transparent;
    }

    figure:hover {
        cursor: hand;
        cursor: pointer;/*Should be good with all browsers*/
        border-color: #000;
    }

Answer 2

Mathew的原因是（+1）其他方法是使用outline代替边框：

figure:hover {
  cursor: hand;
  cursor: pointer;/*Should be good with all browsers*/   
  outline-style: inset;
  outline-color: #000;
  outline-width: 1px;
}

如果您不想支持这样的旧事物，那么这应该具有使用不支持透明边框（即IE6）的浏览器的额外好处。缺点是轮廓将在元素外部计算，因此如果您将这些元素向上移动到页面的一侧，则可能会丢失部分边框。

如何在悬停在它们上方时阻止一组HTML数字移动

2 个答案: