2017-09-27 12 views
-2

状況:完全なpng画像を含むプロジェクト。階層化されたpng透明画はSVGとして保存されます。コードを生きるためにsvgファイルにホバー効果を追加する方法はありますか?

<html> 
    <head><title></title> 
    </head> 
    <body> 
    <div id="templatemo_header"> 
     <div id="site_title"> 
      <p></p> 
      <p> 
       <a href="#"> 
       <b>SUPPLY CHAIN STRATEGIC SOURCING</b> 
      </a> 
      </p> 
      <!-- <img src="gifs/hidden_logo.png" alt="hidden logo" width="256" height="116"></img> --> 

     </div> 
     <p id="intro-text">#WEGSD (We Get Stuff Done) - Supply Chain Team 
     </p> 
    </div> 
<div class="svg"> 
<svg xmlns:***lots of data 
<image 
    width="721" 
    height="726" 
    preserveAspectRatio="none" 
    style="image-rendering:optimizeQuality" 
    xlink:href="data:image/png;base64****lots of data > </image> 

    <a class="fancybox letter-box" title="Invoice Processing" href="invoice_processing.html" data-fancybox-type="iframe" id="invoice-processing" > 

     <image 
    y="37.4552" 
    x="126.97877" 
    id="image55" 
    xlink:href="data:image/png;base64******lots of data> </image> </a> 
    <a class="fancybox letter-box" title="Payment Release" href="payment_release.html" data-fancybox-type="iframe" id="payment-release" ><image 
    y="18.073133" 
    x="367.49765" 
    id="image66" 
    xlink:href="data:image/png;base64*****lots of data> </image></a> 

リンク:[削除] 層状の画像が少しホバーに持ち上げることになっています。これはIE以外のすべてのブラウザで機能します。私はDIVSにすべてを入れて、様々な性質のものを試してみました。さまざまなタグを試してみました。IEの条件文を試しました。IEで動作させることはできません。条件付きIE文を意図的に壊してしまった場合、レイヤーされたイメージが一直線にならず、空白のアウトラインボックスとして表示されます。ホバーを上げると..... <image>は9回続きます。誰も擬似コードを望んでいないが、これは私が得ることができるほど近い。私はchar限界を超えないで何かを正しく表示できないので。

+1

を[MCVE]ではなくを作成してくださいちょうど私たちに擬似コードを与えてください。 –

+0

実際のコードのリンクを使用中に追加しました。 –

+0

このサイトでホストされている例が一般的に最高です。クライアント側であれば、関連するマークアップをスニペットに貼り付けるだけでよいはずです。 (人々はそれをクリックするのがより快適で、削除するといつでも変更/消滅しないので、将来の視聴者に役立つ) – DBS

答えて

0

シンプルなものは、CSSを使用したスタイルを追加して、それを行うには多くの方法は次のように、あります

.someclass : hover { background-color: black; }

はそれをチェックアウト: https://plnkr.co/edit/uyngUBVCU7yLPGUCUX2l?p=preview

+0

それは私が思ったものです。しかし、私が必要とするものはIEでは動作しません。私のクラス名は "レターボックス" '.letter-box { -webkit-transition:all .3s ease-out; 移行:すべての.3s緩和; } .letter-box:ホバー{ -webkit-transform:translate(0px、-10px); トランスフォーム:translate(0px、-10px); } ' –

+0

あなたのクラスにプラカードを更新しました。それは簡単に機能しました。 問題全体を使って新しいplunkrを作成できますか? ありがとうございました https://plnkr.co/edit/jedejH4sqjpj3V9kcGgj?p=preview – Matheus

関連する問題