Question

我有一个小图标设置为

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

当用户将鼠标悬停在图标上时，我需要在下方显示一个div图像。我试着在图标中添加一个悬停类：

a.snapchat:hover {
    width:200px;
    height:200px;
    background-image: url("hover-image");
    position:relative;
    top:60px;
}

但它没有按预期工作。有解决办法吗？

小提琴：https://jsfiddle.net/tkux5uav/

Answer 1

如果您使用图片为div提供id（例如id="imageDiv"），您可以使用CSS操作它，如下所示：

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

Answer 2

您可以在opacity: 0上设置top和否定img属性来执行此操作。当您将鼠标悬停时，请将这些属性更改为opacity: 1和正top属性。这与transition一起将使更改显示为动画。

要做到这一点，你还必须＆＃34;摘要＆＃34;来自img的{{1}}，以便它可以独立移动和隐藏，而不会影响它的父级。通过将父锚设置为a然后将子图像设置为position: absolute来执行此操作。

可能有更好的方法可以实现这一点，但我只编辑了CSS。我没有动摇你的标记。

评论后的修改：

Example Fiddle

＆＃13;

position: relative

＆＃13;

a.snapchat {
  position: relative;
  background: lightgrey;
}

a.snapchat img {
  position: absolute;
  opacity: 0;
  width: 100px;
  height: 100px;
  left: 0;
  top: -20px;
  transition: opacity .5s, top .5s;
}

a.snapchat:hover img {
  opacity: 1;
  top: 20px;
}

＆＃13;

Answer 3

我们走了：

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

希望它有所帮助;）

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

3 个答案:

评论后的修改：