javascript - 当我将鼠标悬停在另一个图像上时使图像可见

Question

基本上我有一个交互式 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">

任何帮助表示赞赏。

Answer 1

如果你想要一个普通的 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; 
}

这应该可以解决问题