请看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 悬停或鼠标悬停功能将整个图片与背景一起考虑，它的工作方式与第二个类似。
有没有什么方法可以将这个属性嵌入到 jquery 中，或者有什么方法可以从这个插件中获益？我想在悬停时添加动画，仅通过纯 css 是不可能的。或者更简单的东西我不知道在没有背景的情况下制作图片？ 非常感谢
最佳答案
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;
}
如果这不是目标，您能否更具体地说明您想要实现的目标？这对我来说很不清楚。
关于javascript - Hover,over 和 .png 透明背景的图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19468319/