无法让我的图像悬停效果像我想要的那样工作

问题描述

我立即为学校建立网页，我建立了免费乳糖网页 有一些悬停效果，现在我想使我的txt框更大，所以它看起来不小 所以我想在出现的盒子上有更多的宽度，这样我也可以在里面放更多的tekst 只是现在它变窄，并且当它变长时，它在下面的图像后面：-/ 希望有人能够帮助我，以便我能完成发送任务，最后我希望与成员进行两排，并在其下进行操作，我希望我的英语不会太差，你们能理解我的意思。哈哈

dbEntry.Collections

//foreach (var property in navigations)
foreach (var dbItemsEntry in dbEntry.Collections)
{
    //var propertyName = property.GetPropertyAccess().Name;
    //var dbItemsEntry = dbEntry.Collection(propertyName);
    var dbItems = dbItemsEntry.CurrentValue;
    var items = dbItemsEntry.Metadata.GetGetter().GetClrValue(entity);
    // ...
}

解决方法

您的问题可能需要一些澄清和格式化。您甚至可以要求朋友事先查看您的文字。这是一种改善提问方式的好方法，以便其他用户可以更好地为您提供帮助：How to ask a good question?

现在，据我所知，您的问题是，当动画框出现在悬停在网格中的每个“框”上时，它们如何太狭窄。我相信，希望将width: 100%;添加到.container .box .details .content元素中。

如果您正在学习，也可以借此机会熟悉CSS Grid property。祝你好运！

OP的评论的后续回复：

在我看来，您需要了解有关盒模型的更多信息，here为您提供了很好的资源。

为更具体地指导您，首先，我将使用* selector向您项目中的所有元素添加以下属性，例如：* { box-sizing: border-box; }，只是为了使您的生活更轻松。

>

在.details 和 .content元素上，删除所有绝对位置和top / right / bottom / {{ 1}}属性，以及任何left。请注意，如果您愿意，这也可能是您发现任何不必要的元素并清理代码的好机会。

现在，在transform: translate元素上，将.container .box属性更改为height属性。这样，如果有更多内容，容器的高度将随之增加。

注意：这可能会使您的网格看起来不像以前那样统一，为此，我建议您使用自己的flex属性，或者更好的是，我在我的文章中为您链接的CSS Grid参考初步答案。