如何用多个“悬停区域”更改图像？

-1

我正在使用html和CSS来制作一个简单的7原创奇迹网页以获取基础知识，并且我使用CSS链接到单独的奇妙页面上悬停在菜单上，但是我想要一个图像当我将鼠标悬停在链接上时，例如当我将鼠标悬停在“阿耳忒弥斯神庙”链接上时，我想将图像更改为我已经保存并可以参考的阿耳忒弥斯神庙的片段图像，从而更改为各个奇迹的片段。如何用多个“悬停区域”更改图像？

如果有什么我可以清除，只是问。代码贴在下面：（我知道它可能不是做的最好的方式，但我学习）

HTML代码

主要CSS代码

的.changing和.changed是我怎么想我可能能够接近它，但意识到它可能不会那样工作，所以如果需要的话，可以忽略它们。

感谢所有帮助

来源

2017-02-26 Kai

欢迎来到StackOverflow！为了让我们更好地帮助您，请更新您的问题，以便它将问题本身中的所有相关代码显示为[最小，完整且可验证的示例]（http://stackoverflow.com/help/mcve），而而不是链接到代码的图像。让我们知道您迄今为止尝试解决您的问题也是有帮助的。有关详细信息，请参阅[帮助文章]（http://stackoverflow.com/help/how-to-ask），了解如何提出良好问题。 –

你可以把代码放入[jsfiddle.net]（http://jsfiddle.net）或类似的东西，这样它可以被修改？ –

请不要粘贴代码图片。下次粘贴实际代码。为了重现你的错误，在后面输入它是很痛苦的。如果您粘贴实际代码，则会缩短重现问题所需的时间 – bc004346

去了解这一点，你需要给阿尔忒弥斯神庙点选择的，从应不有悬停效果图像分开它，最好的形式类。在这里，我给它的类hoverImage。请注意，它被应用到外部DIV，纯粹是为了处理图像的高度：

.hoverImage:hover { 
    background-image: url('your-image'); 
}

：

<div class="hoverImage"> 
    <a href="#Artemis">Temple of Artemis</a> 
</div>

然后当DIV悬停在与:hover伪类，你可以更改背景图片

我创建了一个工作小提琴演示此here。

希望这会有所帮助！ :)

来源

2017-02-26 23:15:34

如何用多个“悬停区域”更改图像？

回答

相关问题