基本上我有一个交互式 map ,其中包含 4 个 div 语句,每个语句包含一个岛屿的图像。我想创建一个悬停事件,它将根据用户悬停的图像显示相应的航行时间表。例如岛 1 应显示时间表 1。
到目前为止我有以下代码,理想情况下我正在寻找 javascript 或 css 解决方案:
<div class="Map">
<div id="Island_Morar">
<img src="images/IsleOfMorar.jpg"/>
</div>
<div id="Island_Rum">
<img src="images/IsleOfRum.jpg"/>
</div>
<div id="Island_Eigg">
<img src="images/IsleOfEigg.jpg"/>
</div>
<div id="Island_Muck">
<img src="images/IsleOfMuck.jpg"/>
</div>
</div>
<img id="TimetableEigg" src="images/TimetableEigg.jpg">
任何帮助表示赞赏。
最佳答案
如果你想要一个普通的 css 解决方案,你需要一些不同的标记。如果你想为每次悬停设置不同的时间表,你应该这样做:
标记
<div class="tt-container" id="Island_Rum">
<img src="images/IsleOfRum.jpg"/>
<img class="timetable" src="images/TimetableRum.jpg">
</div>
<div class="tt-container" id="Island_Eigg">
<img src="images/IsleOfEigg.jpg"/>
<img class="timetable" src="images/TimetableEigg.jpg">
</div>
<div class="tt-container" id="Island_Muck">
<img src="images/IsleOfMuck.jpg"/>
<img class="timetable" src="images/TimetableMuck.jpg">
</div>
</div>
CSS
.timetable {
display : none;
}
.tt-container:hover .timetable {
display : block;
}
这应该可以解决问题
关于javascript - 当我将鼠标悬停在另一个图像上时使图像可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27188673/