css 如何实现悬停效果的图像显示另一个图像？[复制]

bogh5gae 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(127)

此问题在此处已有答案：

（9个答案）
3天前关闭。
这是html代码

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

这是CSS代码

.footballinfo{
    position: absolute;
    top:230px;
    left: 400px;
}
.readmore{
    position: absolute;
    top:230px;
    left: 400px;
    display: none;
}
.footballinfo:hover .readmore{
    display: inline;
    opacity:0.6;
}

这是我为实现悬停效果而编写的代码。但由于某种原因，它没有给予显示另一个图像的预期输出。您能指出我在其中一行代码中所犯的错误吗？

css

来源：https://stackoverflow.com/questions/75759589/how-to-implement-the-hover-effect-on-an-image-to-be-displayed-another-image-over

1条答案

按热度按时间

8yparm6h1#

你不能像你的代码一样从相邻元素中定位元素。这些图像需要在同一个容器中，如下所示：

<div class="container">
  <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>

然后你可以选择readmore元素，用css中的这类代码按照你的意愿设置它的样式：

.container:hover .readmore {
  // your styles go here
}

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何实现悬停效果的图像显示另一个图像？[复制]

1条答案

相关问题

热门标签

最新问答