Javascript 鼠标悬停在图像上时显示图像

我有一个小图标设置为

<a class="snapchat" style="margin: 5px 5px 0 -2px;" 
 target="_blank" href="#"><img src="theimage" />
 </a>

但它并没有像预期的那样起作用。有没有解决办法

---

Fiddle:

如果您给带有图像的div一个id（例如

id=“imageDiv”

），您可以使用CSS像这样操作它：

#imageDiv {display: none;}
a.snapchat:hover #imageDiv {display: block;}

---

如果将id与图像一起提供给div（例如

id=“imageDiv”

），则可以使用CSS对其进行如下操作：

#imageDiv {display: none;}
a.snapchat:hover #imageDiv {display: block;}

---

您可以通过在

img

上设置

opacity:0

和负

top

属性来实现这一点。然后悬停时，将这些属性更改为

opacity:1

和正的

top

属性。这与

转换一起将使更改显示为动画

要做到这一点，您还必须从
a
中“抽象”
img
，以便它可以独立地移动和隐藏，而不会影响其父对象。为此，将父锚点设置为
位置：绝对
，然后将子图像设置为
位置：相对

也许有更好的方法可以做到这一点，但我只编辑了css。我没动你的标记

评论后的修改：


a.snapchat{
位置：相对位置；
背景：浅灰色；
}
a、 snapchat img{
位置：绝对位置；
不透明度：0；
宽度：100px；
高度：100px；
左：0；
顶部：-20px；
过渡：不透明度.5s，顶部.5s；
}
a、 快照聊天：悬停img{
不透明度：1；
顶部：20px；
}
您可以通过设置
不透明度：0
和
img
上的负
top
属性来完成此操作。然后悬停时，将这些属性更改为
opacity:1
和正的
top
属性。这与
转换一起将使更改显示为动画

要做到这一点，您还必须从
a
中“抽象”
img
，以便它可以独立地移动和隐藏，而不会影响其父对象。为此，将父锚点设置为
位置：绝对
，然后将子图像设置为
位置：相对

也许有更好的方法可以做到这一点，但我只编辑了css。我没动你的标记

评论后的修改：


a.snapchat{
位置：相对位置；
背景：浅灰色；
}
a、 snapchat img{
位置：绝对位置；
不透明度：0；
宽度：100px；
高度：100px；
左：0；
顶部：-20px；
过渡：不透明度.5s，顶部.5s；
}
a、 快照聊天：悬停img{
不透明度：1；
顶部：20px；
}
我们开始：

<img id="Image"/>
    <script>
        $(document).ready(function(){
            $("#Image").mouseover(function(){
                $("#Image").show();
            });
            $("#Image").mouseout(function(){
                $("#Image").hide();
            });
        });
        </script>


$（文档）.ready（函数（）{
$（“#图像”）.mouseover（函数（）{
$（“#图像”）.show（）；
});
$（“#图像”）.mouseout（函数（）{
$（“#图像”）.hide（）；
});
});

希望有帮助；）
 我们开始：

<img id="Image"/>
    <script>
        $(document).ready(function(){
            $("#Image").mouseover(function(){
                $("#Image").show();
            });
            $("#Image").mouseout(function(){
                $("#Image").hide();
            });
        });
        </script>


$（文档）.ready（函数（）{
$（“#图像”）.mouseover（函数（）{
$（“#图像”）.show（）；
});
$（“#图像”）.mouseout（函数（）{
$（“#图像”）.hide（）；
});
});

希望有帮助；）
 你能创建提琴吗？这是我想使用的效果：（snapchat位于左上角）当鼠标悬停在另一个图像框上时。你能创建提琴吗？这是我想使用的效果：（snapchat位于左上角）当鼠标悬停在另一个图像框上时。谢谢你的回复，这就是我想要使用的效果：selenagomez.com（位于左上角的snapchat图标），当鼠标悬停在带有另一个图像的框上时。@Yoligrana尝试新的示例。这更像你要找的吗？谢谢克里斯！我想它会起作用的，我怎样才能将它改为应用于图像而不是“悬停生效”文本？尝试给你的
a.snapchat
提供
背景图像。您可能需要设置
宽度
等等，以使它看起来很好。-如果我的回答对你有帮助，请考虑把它看作是被接受的。我在写代码的时候，一定是错过了删除它。谢谢你发现这个。我已经更新了答案和提琴…谢谢你的回复，克里斯，这就是我想要使用的效果：当鼠标滑过一个带有另一个图像的框时，selenagomez.com（位于左上角的snapchat图标）。@Yoligrana尝试新的示例。这更像你要找的吗？谢谢克里斯！我想它会起作用的，我怎样才能将它改为应用于图像而不是“悬停生效”文本？尝试给你的
a.snapchat
提供
背景图像。您可能需要设置
宽度
等等，以使它看起来很好。-如果我的回答对你有帮助，请考虑把它看作是被接受的。我在写代码的时候，一定是错过了删除它。谢谢你发现这个。我已经更新了答案和小提琴。。。