0

请看一下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 - 老实说我不知道​​这个 over 属性）是正确的。不幸的是，Jquery 悬停或鼠标悬停功能将整个图片与背景一起考虑，它的工作方式与第二个一样。

有什么方法可以将这个 over 属性嵌入到 jquery 中，或者有什么方法可以从这个插件中受益？我想在悬停时添加动画，这仅通过纯 CSS 是不可能的。或者更简单的我不知道制作没有背景的图片？非常感谢

4

2 回答 2

1

这是你想做的吗？它使用 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;
}

如果这不是目标，您能否更具体地说明您想要完成的目标？这对我来说很不清楚。

于 2013-10-19T16:43:02.783 回答
1

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

#squared1:hover{
   //properties here
}

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

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

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

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

于 2013-10-19T16:43:22.847 回答