css - 通过 :hover:before causes base element to disappear on mouse out 添加内容

Question

我正在尝试创建带有背景图像( Sprite )的卡片图 block 。悬停时，我想用一种颜色交换背景图像并添加一些文本。我试图将此文本(可以是 1、2 甚至 3 行)放置在图 block 的正中央。为此，我将基本元素设置为 display: table 并将 :before 元素设置为 display: table-cell(但仅在悬停时)。

我面临的问题是，在将鼠标悬停在基本元素上并将鼠标移出后，基本元素在 Mac 上的 Chrome 和 Opera 中消失了! (在 FF 和 Safari 中工作正常。在 IE 或 Windows/Linux 上的任何这些浏览器中未经测试)。这是我的代码和 fiddle :

fiddle : http://jsfiddle.net/stacigh/0vf47vy5/

.picture {
    outline: 1px solid black;
    float: left;
    margin: 0 10px 10px 0;
    width: 150px !important;
    height: 150px !important;
    background: maroon  url('http://www.placehold.it/150x150');
    cursor: pointer;
    display: table;
}  
.picture:hover {
    background-image: none;
    color: white;
}
.picture:hover:before {
    content: 'Test';
    text-transform: uppercase;
    text-align: center;
        
    display: table-cell;
    vertical-align: middle; 
}

<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>

编辑:这是带有行为的 gif

Answer 1

在 Chrome mac 中选中时，动态添加表格单元格元素会导致布局中断。

我们可以做的一件事是，我们可以默认添加元素并在悬停时更新其内容。

http://jsfiddle.net/0vf47vy5/5/

.picture:before {
  content: '';
  text-transform: uppercase;
  text-align: center;
  display: table-cell;
  vertical-align: middle; 
}

.picture:hover:before {
  content: 'Test';
}

这在 Chrome MAC 中运行良好。