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 のホバーまたはマウスオーバー機能は、全体像を背景と見なし、2 番目のもののように機能します。

この over プロパティを jquery に埋め込む方法や、このプラグインを利用する方法はありますか? ホバー時にアニメーションを追加したいのですが、これは純粋な css だけでは不可能です。または、背景なしで写真を作成する方法がわからない、もっと簡単なことはありますか? どうもありがとうございました

4

2 に答える 2