6

サイトに svg 画像要素があります。マウスオーバーでその画像を非表示にし、マウスアウトで表示したい。

しかし、マウスオーバーで画像がちらつくという奇妙な問題があります。

cssとjqueryで画像を隠してみました。どちらのアプローチでも、同じエラーが発生しました。

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <image x="20" y="20" class="imghideshow" width="300" height="80"
     xlink:href="http://cdn1.iconfinder.com/data/icons/musthave/128/Help.png" />
</svg>

CSS

.imghideshow:hover
{
    visibility:hidden;
}

http://jsfiddle.net/GMd8w/

ちらつきの問題を回復するのを手伝ってください。私が望むのは、ホバー時に画像を非表示にし、マウスアウト時に表示することだけです。

以下の回答に基づいてシナリオを編集しました。

不透明度を適切に実装することで、ちらつきの問題が解決されました。しかし、その css プロパティを実装すると、別の問題が再現されます。

それでは、私の完全な要件を説明しましょう。

2 つの画像が重なっています。(つまり) 子画像が親に重なっています。親画像をクリックすると、jsで関数がトリガーされます。ここでは子の画像が完全に隠されているわけではないため、親の子の重複領域をクリックすることはできません。このフィドルをチェックしてください。

http://jsfiddle.net/VwmEU/

予想される出力は次のとおりです。

子にカーソルを合わせると、非表示になり、親機能をトリガーできるはずです。

ありがとう。

4

2 に答える 2

10

問題は、非表示の可視性が要素 hover に干渉することだけです。必要なのは、別の方法で非表示にすることだけです。例えば

.imghideshow:hover
{
    opacity: 0;
}

更新されたフィドル

新しいソリューション

これ以上できることはないと思います。

シナリオに応じて機能する別のアイデア。上の画像にはマウス操作がありません。イベントを処理するのは下の画像なので、もう一方を透明にする必要があります。

CSS:

#img2 {
    pointer-events: none;
}
#img1 {
    cursor:pointer;
}
#img1:hover ~ #img2 {
    opacity: 0;
}

更新されたフィドル

そして、これがトリックを実行できない場合 (レイアウトに依存するため、私にはわかりません...) 最後のアイデアがあります。たとえば 3 秒のホバーアウトの遅延。唯一の問題は、3 秒ごとに小さなちらつきです。

于 2013-03-15T09:04:17.983 に答える
1

あなたの更新後、私はそれを機能させるためにまったく別のものに移動しました:

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg">
    <g class="first">
      <!-- Both images here -->
      <rect x="25px" y="25px" width="150" height="100" class="green" />
      <rect x="50px" y="50px" width="150" height="100"/>
    </g>
    <g class="hover">
       <!-- The hover state -->
        <rect x="25px" y="25px" width="150" height="100" class="green" id="click" />
    </g>
</svg>

jQuery

$('.first').mouseenter(function() {
    $(this).hide();
    $('.hover').show();
});

$('.hover').mouseleave(function() {
   $(this).hide();
    $('.first').show();
});

$('#click').click(function() {
   alert('clicked'); 
});

更新されたfiddleを参照してください。

于 2013-03-15T08:57:17.993 に答える