Html CSS：在div元素悬停时使用~or+设置另一个div的动画

我已经尝试了很多方法来让它正常工作，但没有成功。。我注意到这个问题已经被问了好几次了，我已经尝试了我找到的解决方案。。但是没有成功

所以，如果你们中有人发现这个问题是重复的，我会先说对不起：

悬停的元素是食物盒，需要缩放动画的元素是食物盒图像：

但它不会开火：

我让它工作的唯一方法是指定.food box image:hover，但当悬停所需的div元素时，它将不会启动

以下是运行的完整代码：

有人知道怎么做吗

.固定按钮容器{ 位置：绝对位置； 宽度：100%； } .按钮， .固定按钮{ 显示器：flex； 柔性流：行换行； } .固定按钮>*{ 宽度：25%； } .固定按钮>*>*{ 宽度：100%； 文本对齐：居中； } .食物盒容器{ 填充：10px； } .食物盒{ 弹性：1； 位置：相对位置； 背景色：白色； 最小高度：300px； 背景色：ffffff； -网络工具包盒阴影：0px 0px 20px 4px rgba0,0,0,0.35； -moz盒阴影：0px 0px 20px 4px rgba0,0,0,0.35； 盒影：0px 0px 20px 4px rgba0,0,0,0.35； 边框颜色：666666； 边框：1px实心6666； 单词包装：打断单词； 边距：0！重要； 填充：0！重要； -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； } .食物盒：悬停{ 光标：指针； -webkit盒阴影：0px 0px 20px 4px rgba255、255、255、0.35； -moz盒阴影：0px 0px 20px 4px rgba255、255、255、0.35； 盒影：0px 0px 20px 4px rgba255、255、255、0.35； -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； } .食物盒：悬停~.食物盒图像{ -moz变换：scale1.1； -webkit转换：scale1.1； 转换：scale1.1； 边框：8px实心红色； } .食物盒.食物盒图像{ 位置：绝对顶部：0左：0； 背景尺寸：封面； 宽度：100%； 最小高度：150px； 背景色：ffffff； -moz转换：全部为0.3s； -webkit转换：所有0.3； 过渡：均为0.3秒； } .食物盒.食物盒内容物{ -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； 位置：绝对底部：0左：0； 单词包装：打断单词； 宽度：100%； 最小高度：150px； 背景色：ffd531； 颜色：000000； 字号：80%； 填充顶部：60px； 左侧填充：5px； 右侧填充：5px； } .食品盒：悬停>.食品盒.食品盒内容物{ 背景：黄色！重要； -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； } .食物盒.食物盒徽章{ 显示：表格； 背景：ffffff！重要； 位置：绝对位置； 左：50%； 最高：50%； -webkit转换：翻译-50%，-50%； 转化：转化-50%，-50%； 宽度：100px； 高度：100px； 线高：100px； 边界半径：50%； 字体大小：12px； 颜色：000000； 文本对齐：居中； -网络工具包盒阴影：0px 0px 39px 4px rgba0,0,0,0.75； -moz盒阴影：0px 0px 39px 4px rgba0,0,0,0.75； 盒影：0px 0px 39px 4px rgba0,0,0,0.75； 边框颜色：d3e0e9； 边框：1px实心b3c9e5； 左侧填充：10px； 右边填充：10px； } .食物盒.食物盒徽章{ 颜色：666； 显示：表格单元格； 垂直对齐：中间对齐； 线高：1.2米； 单词包装：打断单词； } Sydhavsmeny adslkfjaølkfj Sydhavsmeny adslkfjaølkfj 第一个是要替换为.food-box:hover>.foox-box图像的输入错误foox*，正如@panther所指出的那样

现在，如果只想在容器盒内缩放，请将溢出：隐藏到包装容器（即食品盒）

希望这是你所期待的

.固定按钮容器{ 位置：绝对位置； 宽度：100%； } .按钮， .固定按钮{ 显示器：flex； 柔性流：行换行； } .固定按钮>*{ 宽度：25%； } .固定按钮>*>*{ 宽度：100%； 文本对齐：居中； } .食物盒容器{ 填充：10px； } .食物盒{ 溢出：隐藏； 弹性：1； 位置：相对位置； 背景色：白色； 最小高度：300px； 背景色：ffffff； -网络工具包盒阴影：0px 0px 20px 4px rgba0,0,0,0.35； -moz盒阴影：0px 0px 20px 4px rgba0,0,0,0.35； 盒影：0px 0px 20px 4px rgba0,0,0,0.35； 边框颜色：666666； 边框：1px实心6666； 单词包装：打断单词； 边距：0！重要； 填充：0！重要； -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； } .食物盒：悬停{ 光标：指针； -webkit盒阴影：0px 0px 20px 4px rgba255、255、255、0.35； -moz盒阴影：0px 0px 20px 4px rgba255、255、255、0.35； 盒影：0px 0px 20px 4px rgba255、255、255、0.35； -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； } .食物盒：悬停>.食物盒图像{ -moz变换：scale1.1； -webkit转换：scale1.1； 转换：scale1.1； } .食物盒.食物盒图像{ 位置：绝对顶部：0左：0； 背景尺寸：封面； 宽度：100%； 最小高度：150px； 背景色：ffffff； -moz转换：全部为0.3s； -webkit转换：所有0.3； 过渡：均为0.3秒； } .食物盒.食物盒内容物{ -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； 位置：绝对底部：0左：0； 单词包装：打断单词； 宽度：100%； 最小高度：150px； 背景色：ffd531； 颜色：000000； 字号：80%； 填充顶部：60px； 左侧填充：5px； 右侧填充：5px； } .食品盒：悬停>.食品盒.食品盒内容物{ 背景：黄色！重要； -moz转换：所有.1都易于使用； -o型过渡：所有.1s易于进入； -webkit过渡：所有.1都易于使用； 过渡：所有.1都很容易进入； } .食物盒.食物盒徽章{ 显示：表格； 背景：ffffff！重要； 位置：绝对位置； 左：50%； 最高：50%； -webkit转换：翻译-50%，-50%； 转化：转化-50%，-50%； 宽度：100px； 高度：100px； 线高：100px； 边界半径：50%； 字体大小：12px； 颜色：000000； 文本对齐：居中； -网络工具包盒阴影：0px 0px 39px 4px rgba0,0,0,0.75； -moz盒阴影：0px 0px 39px 4px rgba0,0,0,0.75； 盒影：0px 0px 39px 4px rgba0,0,0,0.75； 边框颜色：d3e0e9； 边框：1px实心b3c9e5； 左侧填充：10px； 右边填充：10px； } .食物盒.食物盒徽章{ 颜色：666； 显示：表格单元格； 垂直对齐：中间对齐； 线高：1.2米； 单词包装：打断单词； } Sydhavsmeny adslkfjaølkfj Sydhavsmeny adslkfjaølkfj

---

你有一个错别字foox vs.food。第二件事是您需要使用.food-box:hover>.foox-box-image而不是.food-box:hover~.food-box-image子选择器，而不是兄弟姐妹。@panther:true:最后一分钟有一个bug。。。感谢>选择器上的更新。。。顺便说一句，你知道吗。。。如何确保图像缩放不超出父框的边界？谢谢！。。这正是我们要找的！：

 <div class="food-box">
        <div class="food-box-image" style="background-image: url(myimage.jpg);"></div>

 .food-box:hover ~ .foox-box-image {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
  border:8px solid red;
}