悬停，悬停，.png透明背景的图片

Hover,over and .png pictures with transparent background

本文关键字：悬停 透明 png 背景      更新时间：2023-09-26

请看一下 http://users.sch.gr/ellhn/。此页面背后的 HTML 代码如下：

      #squared1.over {
      background: green;
     cursor: pointer;
     }
     #squared2{
  position: absolute;
  left: 250px;
  cursor: pointer;
     }
 </style>
 </head>
 <body>
 <img src="img/squared1.png" id="squared1" width="195" height="147" class="rollover">
 <img src="img/squared1.png" id="squared2" width="195" height="147"   
  class="rollover">     
 <script src="js/shaperollover.js"></script>    
 <script>
 $( "#squared2" ).hover(
        function() {
           $( this ).animate( { left:300 }, 500 );
           }, 
       function() {
           $( this ).animate( { left:250 }, 500 );
           }
    );
    </script>
  </body>
  </html>

我要疯了。我没有办法消失这个该死的透明背景。问题当然是（正如您在页面上看到的那样）悬停效果开始于可见部分之外，导致透明背景。在第一张图片中，通过应用Javascript插件（称为shaperollover.js），效果从正确的位置开始，但是这只能通过css属性（#squared1.over - 老实说我不知道这个属性）。不幸的是，Jquery悬停或鼠标悬停功能考虑了整个图片的背景，它的工作方式与第二个一样。

有没有办法将此属性嵌入到 jquery 或某种方法可以从这个插件中受益？我想在悬停时添加动画，这仅通过纯 css 是不可能的。还是更简单的东西我不知道制作没有背景的图片？谢谢

这是你想做的吗？它使用CSS3，但如果这是你的愿望，在JavaScript中实现很容易。

<div class="funky-image"><img src="http://users.sch.gr/ellhn/img/squared1.png" alt="" />
.funky-image, .funky-image img{
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}
.funky-image:hover{
    padding-left:300px;
}
.funky-image:hover img{
    background-color:#0f0;
}

如果这不是目标，你能更具体地说明你想要完成什么吗？这对我来说非常不清楚。

首先，我知道没有 .over 属性，也许你的意思

是 
#squared1:hover{
   //properties here
}

其次，如果我没记错的话，大多数或所有.png都是透明背景。

通过jQuery，你可以通过.hover事件完成一些事情，例如：

$('#idOfElement').hover(function(){
  $(this).animate({left: 250}, 500);
})

你能更清楚你想完成什么吗，我很难理解你到底需要什么。

相关文章：