Question

我找不到与此主题相关的任何答案非常有用，所以我将再次提问。我在div中有一个img

<div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" width="200"> </a></div>

当我做的时候

#gratterlendis img:hover {
background:url("images/svarterlendis.png)
}

没有任何反应..即使我知道那张照片已经加载了但如果我举例如margin-left：10px;在里面#gratterlendis img：hover然后图片电影10px离开??

有什么建议吗？

Answer 1

或者您可以尝试在A标签上添加CLASS属性。

示例：

*<div id ="gratterlendis"> <a class=swap href ="?page_id=8"><img src="img/gratterlendis.png" align="right" width="200"> </a></div>*

然后在CSS中添加以下内容：

*a.swap { background-image:url(img/gratterlendis.png); } a.swap:hover { background-image:url(img/svarterlendis.png); }*

这对我有用...我也注意到你使用了IMG和IMAGES文件夹...确保它们在特定文件夹上或正确地重命名以便CSS找到图像。

希望它适合你。任何其他需要完成你的问题，你可以在这里发布... 感谢

Answer 2

你可以像这样使用jquery

<script type="text/javascript">
    $(document).ready(function () {
        $("#gratterlendis").mouseover(function () {
            $("#my_image").attr("src", "images/svarterlendis.png");
        });
        $("#gratterlendis").mouseleave(function () {
            $("#my_image").attr("src", "img/gratterlendis.png");
        });
    });
</script>

<div id="gratterlendis">
        <a href="?page_id=8">
            <img src="img/gratterlendis.png" align="right" width="200" id="my_image">
        </a>
    </div>

Answer 3

如果上述建议均无效。 http://brassblogs.com/css/css-image-swap

将鼠标悬停在div中的图像上

3 个答案: