Question

请看一下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。或者更简单的我不知道在没有背景的情况下拍照？非常感谢你

Answer 1

Is this what you wanted to do?使用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;
}

如果这不是目标，你能更具体地了解你想要完成的任务吗？这对我来说非常不清楚。

Answer 2

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

#squared1:hover{
   //properties here
}

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

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

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

你能更清楚自己想要完成什么，我很难理解你需要什么。

悬停，覆盖和.png图片透明背景

2 个答案: