Html 如何使flexbox在移动设备上悬停灵活

我正在用

flexbox

属性建立一个网站。然而，我希望当用户将鼠标悬停在盒子上时，我希望盒子的颜色发生变化，当使用手机时，我希望盒子能够相应地进行调整

以下是我的代码和尝试：

HTML:

问题是，当我悬停时，它只针对文本，而不是框本身。我如何解决这个问题以框为目标而不是链接，因为我希望链接以框为目标而不仅仅是文本

要更改框颜色，需要设置背景。（颜色指文本）

---

你可以这样做-

<代码>。功能框{ 利润率：30像素； 显示器：flex； 柔性包装：包装； 弯曲方向：行； 证明内容：中心； 对齐项目：居中； 背景色：rgb（6,67,122）； 填充物：5px； /*这个*/ } .功能框>a{ 文字装饰：无； flex:1自动； 边框：5pRGB（255、255、255）实心； 保证金：5px； 宽度：200px； 背景颜色：棕色； 高度：250px； 位置：相对位置； 文本对齐：居中； 颜色：白色； } .功能框>a:悬停{ 颜色：绿色； 背景颜色：黄色； }

用于移动调整 您已经为您的类指定了特定的宽度

。功能框

因此，您可以指定

.features-box{
width:100%;
Flex-wrap:wrap;
}

---

非常感谢你。你有手机的解决方案吗？我会接受的。非常感谢。你有手机的解决方案吗？我会接受的。@JA pythonista你希望它在手机上怎么样？如果需要，我的解决方案将根据屏幕大小进行调整check@JA-pythonista您可以通过运行它调整了布局的代码段来查看它。单击全屏，您将得到与最初代码相同的结果。随着屏幕尺寸变小，卡将在我的代码输出中相应地调整是的，我看到它看起来不错。唯一的问题是，我希望它在PC机上像这样，在移动设备上调整，这样它在PC机上就不会保持在同一行：（你有什么补救办法吗？我在考虑媒体选项

.features-box {
    margin: 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1560px;
    height: 380px;
    background-color: rgb(6, 67, 122);
    padding: 5px;
    /* this */
}

.features-box>a {
    text-decoration: none;
    flex: 1 1 auto;
    border: 5px rgb(255, 255, 255) solid;
    margin: 5px;
    width: 500px;
    background-color: brown;
    height: 250px;
    position: relative;
    text-align: center;
    color: white;
}

.features-box>a:hover {
    color: green;
}

.features-box>a:hover {
  background: green;
  color: white;
}

    color: green;
    background-color:
}

.features-box{
width:100%;
Flex-wrap:wrap;
}