我正在尝试使用 CSS 或 JavaScript 在我的主页上放置一个图像横幅导航。我已经尝试了几天,但没有成功。您的帮助将不胜感激。
我希望根据您悬停的链接在横幅支架中显示不同的图像,如果没有悬停,则显示默认图像。
我为导航项和图像设置了 html 和 css,如下所示:
<div id="banner-container">
<img id="img1" src="./path/to/images/1.png" />
<img id="img2" src="./path/to/images/2.png" />
<img id="img3" src="./path/to/images/3.png" />
<img id="img4" src="./path/to/images/4.png" />
<img id="img5" src="./path/to/images/5.png" />
<div id="banner-nav">
<ul id="navlist">
<li>
<a href="#" id="1">Portable Tracking</a>
</li>
<li>
<a href="#" id="2">Fleet Management</a>
</li>
<li>
<a href="#" id="3">Plug & Go</a>
</li>
<li>
<a href="#" id="4">Trailer Tracking</a>
</li>
<li>
<a href="#" id="5">Lone Worker</a>
</li>
</ul>
</div>
</div><!--end banner-container-->