1

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

我已将当前情况的整个 HTML 输出倒入小提琴中：http: //jsfiddle.net/a8T6L/

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

每个项目都是一个<figure>with 和<img>and <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，如果我的意图只是让用户知道悬停在哪个项目上，但我不知道这个问题的答案。

4

2 回答 2

2

发生这种情况的原因是当您悬停时它会在图像周围添加像素。您应该使用 a 设置初始类，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;
    }
于 2013-04-11T21:34:10.723 回答
1

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）的浏览器上工作的额外好处。不利的一面是轮廓将在元素之外计算，因此如果您将这些元素放在页面的一侧，您可能会丢失部分边框。

于 2013-04-11T21:39:14.437 回答