Css 如何处理属性选择器：悬停

我是css的新手，我们班上的一个作业是制作一个包含4个IMG的盒子，当我鼠标悬停在图片上时，盒子中央的图片会更大

每个图像必须有2个文件，小的以th开头，大的以大的开头。需要练习属性选择器

所以我做了一些东西，但我无法理解为什么它不起作用

body>div{
宽度：100%；
高度：800px；
边框：2件纯黑；
}
div{
位置：相对位置；
}
div>div{
位置：绝对位置；
顶部：200px；
左：400px；
}
img{
显示：块；
利润率：20px 10px；
}
img[src*=“th”]{
宽度：250px；
边框：3倍纯黑；
盒影：10px 10px 10px#666；
}
img[src*=“/大”]{
显示：无；
}
img[src*=“th”]：悬停{
盒影：插入10px 10px 10px#666；
}
img[src*=“th”]：悬停+img[src*=“/big”]{
显示：块；
}

---

选择器选择紧跟在另一个元素之后的元素

因此，大图像div必须直接位于较小图像的旁边。您已经使用这个选择器

img[src*=“th”]：hover+div img[src*=“/big”]

而不是

img[src*=“th”]：hover+img[src*=“/big”]

来处理嵌套图像

body>div{
宽度：100%；
高度：800px；
边框：2件纯黑；
}
div{
位置：相对位置；
}
div>div{
位置：绝对位置；
顶部：200px；
左：400px；
}
img{
显示：块；
利润率：20px 10px；
}
img[src*=“th”]{
宽度：250px；
边框：3倍纯黑；
盒影：10px 10px 10px#666；
}
img[src*=“/大”]{
显示：无；
}
img[src*=“th”]：悬停{
盒影：插入10px 10px 10px#666；
}
img[src*=“th”]：悬停+div img[src*=“/big”]{
显示：块；
}

---

试着让IMG彼此相邻。 “+”仅适用于下一个同级元素

.outer div{
宽度：100%；
高度：500px；
边框：2件纯黑；
}
.外分区{
位置：相对位置；
}
img{
显示：块；
利润率：15px 10px；
}
img[src*=“/100”]{
边框：3倍纯黑；
盒影：10px 10px 10px#666；
}
img[src*=“/200”]{
显示：无；
}
img[src*=“/100”]：悬停{
盒影：插入10px 10px 10px#666；
}
img[src*=“/100”]：悬停+img[src*=”/200”]{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

谢谢，有一种方法可以在不更改HTML格式的情况下选择相关图像，而在任何情况下都可以使用属性选择器选择较大的图像？@IdanBachar抱歉，但我不明白你的意思。你说+仅用于兄弟姐妹选择对吗？这意味着我需要改变div的位置。有任何方法仍然可以得到我想要的，并选择“大”“图像而不更改HTML？可能在：hover之后使用不同的方式选择元素？不，这在CSS中是不可能的。您总是希望选择相应的大图像，对吗？然后您需要一个选择器，真正只选择一个图像。因此，您必须始终选择下一个或子元素。也许您可以查看最后，但接下来所有的大图像都会显示出来。非常感谢！任务完成了，我明白了这一点，这是非常重要的事情！