Question

我使用具有悬停效果的CSSGrid在台式机上效果很好，但是我在移动设备上有一个错误，找不到问题。

您可以在此处查看页面，并在桌面上通过移动视图查看：http://lafabutineuse.flywheelsites.com/realisations

我将图片标题和链接定义为绝对值和div高度的100％。

我在图片上的标题代码：

 h2 a, h2 {
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    padding: 10px;
    padding-bottom: 10px!important;
    text-align: center;
    height: 100%;
    z-index: 10000;
    transition-property: background;
    -webkit-transition-property: background;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

悬停时使用相同的代码，但颜色不同：

h2 a:hover, h2:hover {
    background: rgba(224,197,76,0.61);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center!important;
    vertical-align: middle;
    padding: 10px;
    padding-bottom: 10px!important;
    text-align: center!important;
    justify-content: center;
    display: flex;
    height: 100%;
    z-index: 10000;
}

我尝试了一些代码来解决此问题，但无法在手机上保持相同的效果。

你有什么主意吗？

谢谢

Answer 1

在小于980像素的屏幕上，您尚未为position明确设置.et_pb_grid_item，这就是您的悬停链接占用.et_pb_portfolio_items的100％的原因。将position: relative;设置为.et_pb_grid_item，这样可以解决悬停问题。

.et_pb_grid_item {
    position: relative;
}

响应式CSSGrid和悬停问题

1 个答案: