javascript - Display image when mouse over image - Stack Overflow

admin管理员组

文章数量:1401122

I have a small icon set as

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

I need to display a div below with an image when user mouse over the icon. I tried by adding a hover class to the icon:

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

but it does not work as expected. Is there a solution to get this?

Fiddle : /

I have a small icon set as

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

I need to display a div below with an image when user mouse over the icon. I tried by adding a hover class to the icon:

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

but it does not work as expected. Is there a solution to get this?

Fiddle : https://jsfiddle/tkux5uav/

• javascript
• css

Share Improve this question Follow edited Apr 27, 2016 at 11:37 Yoligrana asked Apr 27, 2016 at 11:17 YoligranaYoligrana 4311 gold badge22 silver badges99 bronze badges 2

• can you please create fiddle? – Jainam Commented Apr 27, 2016 at 11:21
• This is the effect I want to use: selenagomez. (snapchat located on top left) when mouse over appears a box with another image. – Yoligrana Commented Apr 27, 2016 at 11:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can do this by setting opacity: 0 and a negative top property on the img. When you then hover you change these properties to opacity: 1 and a positive top property. This along with the transition will make the changes appear as animations.

To do this, you also have to "abstract" the img from the a so that it can move and hide independently and without affecting it's parent. Do this by setting the parent anchor to position: absolute and then the child image to position: relative.

There might be better ways you can acplish this, but I only edited the css. I left your markup untouched.

Modifications after ment:

Example Fiddle

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;
}

<a class="snapchat" style="margin: 5px 5px 0 -2px;" target="_blank" href="#">Hover for effect<img src="http://i.utdstc./icons/256/snapchat-android.png" /></a>

If you give an id to the div with the image (for example id="imageDiv"), you can manipulate it with CSS like this:

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

Here we go:

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

Hope it helps;)

Starting from your approach, the easiest implementation would be to have no img src but two background images in css, one for each state (hover or not).

Html

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

Css

.snapchat{width:300px;height:300px;display:block;background-image: url("image1")}
    
    .snapchat:hover{width:100%;height:100%;background-image: url("image2");
    position:absolute;
    top:60px;}

本文标签： javascriptDisplay image when mouse over imageStack Overflow