具有透明背景的悬停、悬停和 .png 图片答案

【问题标题】：Hover,over and .png pictures with transparent background具有透明背景的悬停、悬停和 .png 图片
【发布时间】：2013-10-20 00:43:22
【问题描述】：

请查看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 是不可能的。或者更简单的我不知道制作没有背景的图片？非常感谢

【问题讨论】：

你考虑过制作 CSS3 图形吗？
当您将鼠标悬停在第二张图片上时，您是否尝试保持绿色背景？我不清楚你的解释。
我希望只有当鼠标悬停在图像的可见部分而不是透明部分时才会触发悬停。

标签： javascript jquery css

【解决方案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;
}

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

【讨论】：

我希望只有当鼠标悬停在图像的可见部分而不是透明部分时才会触发悬停效果。
非矩形悬停区域可以使用图像地图来完成。这个问题的最佳答案应该让您走上正确的道路：stackoverflow.com/questions/745110/…

【解决方案2】：

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

#squared1:hover{
   //properties here
}

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

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

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

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

【讨论】：

抱歉不清楚。请注意触发悬停效果的 2 张图片。我只想在鼠标位于图像的可见部分而不是透明部分时被触发。此外，如果我用#squared1:hover 替换#squared1.over，第一张图片不会按我想要的方式工作。但是，我不明白#squared1.over 是什么意思...
这是不可能的，看到图像是一个正方形，你不可能把它做成你想要的确切形状，你可以用一些 CSS/Javascript 把它做成一个圆形和其他多边形，但是你不能塑造这样的形象。