图片悬停显示另一张图片效果实现故障排查

你的代码无法实现预期效果的核心问题是CSS选择器使用错误，同时还有可优化的细节点，具体修正如下：

核心错误：选择器不匹配 #

.footballinfo:hover .readmore 这个选择器的逻辑是选中.footballinfo内部的.readmore子元素，但你的两张<img>是同级关系，并非父子嵌套，所以这个选择器根本找不到目标元素。

修正方案：使用兄弟选择器 #

因为两张图片是相邻的同级元素，改用相邻兄弟选择器（+）即可匹配到目标：

.footballinfo:hover + .readmore{
    display: block;
    opacity:0.6;
}

额外优化建议 #

1. 将display: inline改为display: block：<img>是替换元素，用block更符合其特性，能避免不必要的间距问题。
2. 用父容器包裹图片优化定位：直接给图片加绝对定位容易影响页面其他元素，建议套一个相对定位的父容器，内部图片用绝对定位：

<div class="img-wrap">
    <img class="footballinfo" src="FootBallInfo.jpg" alt="FootBallInfo1" width="600" height="400">
    <img class="readmore" src="ReadMore.jpg" alt="readmore1" width="600" height="400">
</div>

.img-wrap{
    position: relative;
    top: 230px;
    left: 400px;
    width: 600px;
    height: 400px;
}
.footballinfo{
    position: absolute;
    top: 0;
    left: 0;
}
.readmore{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.img-wrap:hover .readmore{
    display: block;
    opacity:0.6;
}

这种方式后续调整位置只需要修改父容器样式，更灵活可控。

内容的提问来源于stack exchange，提问作者alfalfa