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 のホバーまたはマウスオーバー機能は、全体像を背景と見なし、2 番目のもののように機能します。
この over プロパティを jquery に埋め込む方法や、このプラグインを利用する方法はありますか? ホバー時にアニメーションを追加したいのですが、これは純粋な css だけでは不可能です。または、背景なしで写真を作成する方法がわからない、もっと簡単なことはありますか? どうもありがとうございました