Question

＆＃13;

<!DOCTYPE html>
<html>
<head>
    
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <script>
        
        $(document).ready(function(){
            $("img").mouseenter(function(){
                $("#hello").css("width", "400px");
            });
            $("img").mouseleave(function(){
                $("#hello").css("width", "50px"));
            });
        });
        
    </script> 
    
    
    
</head>

<body>
    
    
    
    <img id="hello" src="img/hello.png">
    
    

</body>

</html>

＆＃13;

大家好，

我有这个图像，我想添加一些悬停效果。

最初我想要显示图表徽标，然后当有人在它上面悬停时，它会展开以显示整个图像，并仅在指针离开时返回到图表徽标。

我尝试过使用jquery moueeneter mouseleave效果，但我无法获得我想要的效果。有没有简单或最好的方法来实现这一目标？非常感谢：）

Answer 1

实际上很简单。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("img").on({
 "mouseover" : function() {
    $('#imageid').css({'width' : '700px' , 'height' : '700px'});
  },
  "mouseout" : function() {
    $('#imageid').css({'width' : '70px' , 'height' : '70px'});
  }
});
});
</script>
</head>
<body>
 <img id="imageid"  src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="width:70px;height:70px">
</body>
</html>

您也可以使用相同的逻辑进行悬停。以下是以防万一：https://plnkr.co/edit/kFVhlsK8uwFwZkiA5o56?p=preview

并且，这里使用jquery悬停的plunker：https://plnkr.co/edit/z0EZG33GeKe7icAFmxK2?p=preview

Answer 2

嗨，这是一个带有一些css过渡的例子

$(document).ready(function(){
  $("img").on({"mouseover" : function() {
    $('img').css({'width' : '200px' , 'height' : '200px'});
  },
    "mouseout" : function() {
    $('img').css({'width' : '100px' , 'height' : '100px'});
  }
  });
});

img {
 transition: width 1s, height 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image"  src="http://placehold.it/350x150" style="width:100px;height:100px">

Answer 3

你可以试试一个纯粹的css解决方案，比如这个

＆＃13;

#hello{width:200px;} /*this is just limiting the width for preview reasons*/


#hello{-webkit-transition: all 1s ease; 
 transition: all 1s ease; /*this animates the transition*/
-webkit-clip-path: polygon(0 0, 55% 0, 55% 100%, 0% 100%);
clip-path: polygon(0 0, 55% 0, 55% 100%, 0% 100%);
  
}
#hello:hover{
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

＆＃13;

<img id="hello" src="http://i.stack.imgur.com/d42l2.png">

＆＃13;

CSS或JQuery Hover效果

3 个答案: