Gibt es eine Möglichkeit, Hover-Effekte zu Svg-Dateien hinzuzufügen?

-2

Situation: Projekt mit vollständigem PNG-Bild, mit geschichteten PNG-Folien, die als SVG gespeichert wurden.Gibt es eine Möglichkeit, Hover-Effekte zu Svg-Dateien hinzuzufügen?

<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>

Link-Code zu leben: [removed] Die geschichteten Bilder sollen auf schweben heben leicht. Dies funktioniert in allen Browsern außer IE. Ich habe versucht, alles in DIVS zu setzen, von verschiedener Natur, habe verschiedene Tags ausprobiert, IE bedingte Anweisungen versucht und ich kann es einfach nicht im IE funktionieren lassen. Wenn ich es absichtlich mit bedingten IE-Anweisungen abbruche, wirft es die geschichteten Bilder aus der Ausrichtung und zeigt sie nur als leere umrandete Kästchen an; welche wiederum heben auf schweben ..... <image> geht für 9 mal weiter. Niemand möchte Pseudocode, aber das ist so nah wie möglich. Da kann ich nichts richtig zeigen, ohne das Char-Limit zu überschreiten.

Quelle

2017-09-27 Michael Bicknell

Bitte erstellen [MCVE] statt gib uns nur einen Pseudo-Code. –

hinzugefügter Link des tatsächlich verwendeten Codes. –

Ein Beispiel, das auf dieser Website gehostet wird, ist im Allgemeinen am besten, wenn man davon ausgeht, dass es alles auf der Client-Seite ist, sollte es einfach möglich sein, das entsprechende Markup in ein Snippet einzufügen. (Die Leute sind komfortabler, wenn sie darauf klicken, und sie werden sich nicht ändern/verschwinden, wenn Sie sie entfernen, was die Frage für zukünftige Zuschauer hilfreicher macht) – DBS

Es gibt viele Möglichkeiten, das zu tun, ein einfaches ist das Hinzufügen eines Stils mit CSS, wie:

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

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

Quelle

2017-09-27 15:50:23 Matheus

Das habe ich mir gedacht. Aber was ich brauche, funktioniert nicht in IE. Mein Klassenname ist "letter-box" '.letter-box { -webkit-transition: alle .3s easy-out; Übergang: Alle .3s Leichtigkeit; } .letter-box: schweben { -webkit-transform: translate (0px, -10px); transform: translate (0px, -10px); } ' –

Ich habe den Plunker zu Ihrer Klasse aktualisiert, und es hat einfach funktioniert. Kannst du ein neues Plunkr mit deinem ganzen Problem erstellen? danke https://plnkr.co/edit/jedejH4sqjpj3V9kcGgj?p=preview – Matheus

Gibt es eine Möglichkeit, Hover-Effekte zu Svg-Dateien hinzuzufügen?

Antwort

Verwandte Themen