通过以下方式添加内容：hover：before导致鼠标移出时基本元素消失

Question

我试图创建一个带有背景图片的卡片（精灵）。在悬停时，我想用一种颜色交换背景图像并添加一些文字。我试图将这个文本（可以是1行，2行甚至3行）放在图块的正中心。为此，我将基本元素设置为：table，将:before元素设置为display: table-cell（但仅限于悬停）。

我面临的问题是，在一个人徘徊基本元素并被剔除之后，基本元素在Mac上的Chrome和Opera中消失了！ （适用于FF和Safari。在IE或Windows / Linux上的任何浏览器中未经测试）。这是我的代码和小提琴：

小提琴： http://jsfiddle.net/stacigh/0vf47vy5/

＆＃13;

＆＃13;

.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; 
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

编辑： 这是一个行为的GIF

Answer 1

在Chrome mac中检查后，动态添加table-cell元素会导致布局中断。

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

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中的有效工作。