通过：hover：before添加内容会导致基本元素在鼠标移出时消失

debugcn 发表于 Dev

坚定

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

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

小提琴：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 ：hover：before伪元素前的古怪行为

布瓦纳

在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中可以正常使用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

通过：hover：before添加内容会导致基本元素在鼠标移出时消失

通过：hover：before添加内容会导致基本元素在鼠标移出时消失

通过：hover：before添加内容会导致基本元素在鼠标移出时消失

如何延迟鼠标移出时元素的消失

鼠标悬停时淡入非文本元素

在将鼠标移出父DIV时隐藏子元素-AngularJs

在图像标签上添加叠加层时避免鼠标移出

鼠标移出时图标旋转

在布局中添加内容会导致崩溃

Scala树集排序会导致元素消失？

通过增加恒定的正负损失会导致梯度消失吗？

为什么添加jQuery Mobile会导致HTML消失？

在脚本元素上消失的类型

添加绝对定位的元素会导致换行

添加绝对定位的元素会导致换行

通过 for 循环向元素添加事件会导致所有元素仅影响循环中的最后一个元素

调整控制台大小或将其移出屏幕时，通过 SetPixel 设置的 C++ 像素消失

添加目标属性时未通过JSON填充的链接列表。什么会导致无法显示

JList（与 arraylist 链接）添加元素导致内存过高或消失

后端返回404/422时，GKE基本元素间歇性返回502

如何基于通过JavaScript添加的类更改元素的:: before内容？

鼠标移出时清除多边形

CSS：防止在鼠标移出时重置动画？

鼠标移出图像时的缩放过渡

单击或轻击它们时，View Controller中的元素会消失

当鼠标移动通过间隙时，如何允许：hover维持？

通过js放大画布会导致内容丢失？

CSS居中内容通过伪元素添加

鼠标悬停和鼠标移出时图像闪烁

xaml：如何通过路由事件使用自定义控件来更改基本元素属性

打开时将清除文件内容会导致错误C