2017-09-27 3 views
-2

Situation: Projet avec une image png complète, avec des transparences png en couches enregistrées au format SVG.Est-il possible d'ajouter des effets hover aux fichiers 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> 

Lien vivre code: [removed] Les images en couches sont censés soulever légèrement sur vol stationnaire. Cela fonctionne dans tous les navigateurs sauf IE. J'ai essayé de tout mettre dans DIVS, de nature diverse, essayé divers tags, essayé des déclarations conditionnelles IE, et je ne peux tout simplement pas le faire fonctionner dans IE. Si je le casse intentionnellement avec des instructions IE conditionnelles, il désaligne les images en couches et les affiche simplement comme des boîtes vides; qui à son tour faire lever en vol stationnaire ..... <image> se poursuit pour 9 fois. Personne ne veut de pseudo code, mais c'est aussi proche que possible. Puisque je ne peux pas montrer correctement quoi que ce soit sans dépasser la limite de carbonisation.

+1

S'il vous plaît créer un [mcve] plutôt que juste nous donner un pseudo code. –

+0

ajouté le lien du code réel en cours d'utilisation. –

+0

Un exemple qui est hébergé sur ce site est généralement le meilleur, en supposant que tout le côté client, vous devriez juste pouvoir copier coller le balisage pertinent dans un extrait. (Les gens sont plus à l'aise de cliquer dessus et il ne changera pas/disparaîtra chaque fois que vous le supprimerez, ce qui rendra la question plus utile pour les futurs téléspectateurs) – DBS

Répondre

0

Il y a plusieurs façons de le faire, un simple est d'ajouter un style en utilisant le CSS, comme:

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

check it out: https://plnkr.co/edit/uyngUBVCU7yLPGUCUX2l?p=preview

+0

C'est ce que je pensais. Mais ce dont j'ai besoin ne fonctionne pas dans IE. Mon nom de classe est "letter-box" '.letter-box { -webkit-transition: tous .3s facilité; transition: tous les .3s facilitent la sortie; } .lettre-lettre: hover { -webkit-transformer: translate (0px, -10px); Transformer: traduire (0px, -10px); } ' –

+0

J'ai mis à jour le plunker à votre classe, et cela a fonctionné facilement. Peut-on créer un nouveau plunkr en utilisant tout votre problème? merci https://plnkr.co/edit/jedejH4sqjpj3V9kcGgj?p=preview – Matheus