Question

我需要一些悬停diplay区域的帮助，它完全覆盖移动设备上的文本，但它在桌面版本上。知道我能做些什么来解决这个问题吗？它是创始人图片下的悬停元素。 https://www.webleviathan.com/#team

非常感谢提前人们。贝

Answer 1

.team-member:hover .details {
  font-size: 16px;
}

是原因，请将此选择器添加到适用于移动设备的媒体中断。

使用em或vh而不是px。

Answer 2

托尼，因此，该div的课程是.details 该类的当前CSS是

.team-member:hover .details, .team-member:focus .details {
    top: 0;
    opacity: 1;
    color: white;
    background: #333;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.team-member .details {
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    height: 190px;
    padding: 15px;
    opacity: 0;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    -webkit-transition: all 500ms;
    transition: all 500ms;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

我看到了。您的CMS正在使用引导程序，因此，当我将视口更改为更大的移动尺寸时，...

这是因为引导程序不是Device Responsive Design framework，而是一个非常古老的移动优先概念。

在CMS和主题上进行一些挖掘，我看到运行主题Zerif-Lite的WordPress 4.9.8

我是WP的忠实粉丝，而Zerif-lite 是一个很棒的主题时代在变...由于您看到的原因，您使用的主题实际上不是wp 4.9.8。他们提出了一个新主题，以取代较新的WP效果不佳的主题。 https://themeisle.com/themes/zelle-lite/

随着WP的变更，开发人员必须跟上变更的步伐，有时旧的工作变得陈旧且存在问题-并不是由于主题开发人员的工作而是平台的变更。

Bootstrap是它的基础。 Bootstrap是Twitter中的一个项目 * Bootstrap v3.1.1（http://getbootstrap.com）

2011-2014 Twitter，Inc.版权

麻省理工学院（https://github.com/twbs/bootstrap/blob/master/LICENSE）许可

Bootstrap现在处于另一个团队的领导之下，并且“包装” bootstrap是因为您在主题中的UI被视为昨天的技术。

您能使Zerif-lite主题实现自举的作用吗？绝对！但是，您将需要全面了解CSS3或非常熟练的Web开发人员。

如果您是程序员类型，可以在使用media querys调整主题时找到答案，但是我不建议您使用这种方法，建议您升级主题。

为什么我的悬停盒移动响应？

2 个答案: