Re: Mouseover text color change is not working in IE & FF

"[email protected] [svg-developers]" <[email protected]> 05 Jul 2015 20:35:52 -0700
Newsgroups gmane.text.xml.svg.devel
Message-ID <[email protected]> 
--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV
Content-Transfer-Encoding: base64
Content-Type: text/plain; charset="UTF-8"

QWJvdXQgdGhlIHRlbXBvcmFyeSBob3ZlciBlZmZlY3QgaXRzZWxmLCBJZiB0aGVyZSBpcyBubyBh
Y3R1YWwgImFuaW1hdGlvbiIgSSByZWNvbW1lbmQgdXNpbmcgdGhlIENTUyBjbGFzcyBpbnN0ZWFk
IG9mIGFuaW1hdGlvbi9zZXQgYmVjYXVzZSB0aGlzIGlzIGZhciBzaW1wbGVyLiBOb3QgdGVzdGVk
IGlmIGl0IHdvcmtzIGluIElFIGJ1dCBhdCBsZWFzdCB3b3JrcyBpbiBGaXJlZm94IGFuZCBDaHJv
bWUuIEhvd2V2ZXIsIGJlaGF2aW9ycyBvZiB0aGUgdW5kZXJsaW5lIGRpZmZlciBiZXR3ZWVuIEZG
IGFuZCBDaHJvbWUgd2hpY2ggaXMgZHVlIHRvIHRoZSB4bWw6c3BhY2U9InByZXNlcnZlIi4gSSBz
dWdnZXN0IHJlbW92aW5nIGl0IHVubGVzcyB0aGVyZSBpcyBhIHZlcnkgc3BlY2lmaWMgdGV4dCBz
cGFjaW5nIHlvdSB3YW50IGZyb20gcHJlc2VydmUuDQoNCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cu
dzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3Lncz
Lm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBpZD0icm9vdCIgd2lkdGg9IjUw
MHB0IiBoZWlnaHQ9IjM3NXB0IiB2aWV3Qm94PSIwIDAgMjAwMDAgMTUwMDAiPg0KICAgIDxzdHls
ZSBjbGFzcz0iY3NzL3RleHQiPg0KICAgIC50ZXh0aG92ZXI6aG92ZXIge2ZpbGw6I2ZmMDAwMDt0
ZXh0LWRlY29yYXRpb246dW5kZXJsaW5lfQ0KICAgIDwvc3R5bGU+DQogICAgPHJlY3QgeD0iMCIg
eT0iMCIgd2lkdGg9IjIwMDAwIiBoZWlnaHQ9IjE1MDAwIiBzdHlsZT0iZmlsbDojMDAwMDAwOyAi
IC8+DQogICAgPHRleHQgY2xhc3M9InRleHRob3ZlciIgaWQ9Il9UZXh0X0JveCIgeD0iNzQwMCIg
eT0iMTgyMCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSJub25lIiBzdHlsZT0iZm9udC13ZWlnaHQ6
NDAwcHg7IGZvbnQtc2l6ZTozMjBweDsgZm9udC1mYW1pbHk6VmVyZGFuYTsgYmFzZWxpbmUtc2hp
ZnQ6LTEwMCU7Ij5UZXh0PC90ZXh0Pg0KPC9zdmc+DQogDQoNCi0tLUluIHN2Zy1kZXZlbG9wZXJz
QHlhaG9vZ3JvdXBzLmNvbSwgPGFyZmF0aF9wYXNoYUAuLi4+IHdyb3RlIDoNCg0KIEhpDQogDQoN
CiBJJ20gZXhwZXJpZW5jaW5nIGEgc3RyYW5nZSBpc3N1ZSB3aXRoIG1vdXNlb3ZlciBpbiBzdmcg
Z3JhcGhpY3Mgd2hlcmUgYSBtb3VzZW92ZXIgb24gdGV4dCBpcyBub3QgY2hhbmdpbmcgdGhlIGNv
bG9yIGluIElFIGFuZCBGaXJlZm94IGJ1dCBpdCBpcyB3b3JraW5nIGZpbmUgd2l0aCBDaHJvbWUu
DQogDQoNCiBIZXJlIGlzIHRoZSBzYW1wbGUgY29kZQ0KIA0KDQogPGh0bWwgZW5jb2Rpbmc9IlVU
Ri04IiA+DQo8Ym9keT4NCiAgPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci
IHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsi
IHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJyb290IiB3aWR0aD0iNTAwcHQiIGhlaWdodD0iMzc1
cHQiIHZpZXdCb3g9IjAgMCAyMDAwMCAxNTAwMCI+DQogICAgPHNldCBpZD0id2ViX3Nob3ciIGF0
dHJpYnV0ZU5hbWU9InZpc2liaWxpdHkiIGF0dHJpYnV0ZVR5cGU9IkNTUyIgYmVnaW49IjJzIiB0
bz0idmlzaWJsZSIvPg0KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMDAwMCIgaGVpZ2h0
PSIxNTAwMCIgc3R5bGU9ImZpbGw6IzAwMDAwMDsgIiAvPg0KICAgIDx0ZXh0IGlkPSJfVGV4dF9C
b3giIHg9Ijc0MDAiIHk9IjE4MjAiIHdpZHRoPSIyMjAwIiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9
Im5vbmUiIHN0eWxlPSJmb250LXdlaWdodDo0MDBweDsgZm9udC1zaXplOjMyMHB4OyBmb250LWZh
bWlseTpWZXJkYW5hOyBiYXNlbGluZS1zaGlmdDotMTAwJTsiPlRleHQgPC90ZXh0Pg0KICAgIDxn
IGlkPSJfVGV4dF9Cb3hfbW91c2VvdmVycyIgPg0KICAgICAgICA8YW5pbWF0ZSB4bGluazpocmVm
PSIjX1RleHRfQm94IiBhdHRyaWJ1dGVOYW1lPSJmaWxsIiB2YWx1ZXM9IiNmZmZmZmY7I2ZmMDAw
MCIgZHVyPSIwcyIgZmlsbD0iZnJlZXplIiBiZWdpbj0iX1RleHRfQm94Lm1vdXNlb3ZlciIgLz4N
CiAgICAgICAgPGFuaW1hdGUgeGxpbms6aHJlZj0iI19UZXh0X0JveCIgYXR0cmlidXRlTmFtZT0i
dGV4dC1kZWNvcmF0aW9uIiB2YWx1ZXM9Im5vbmU7dW5kZXJsaW5lIiBkdXI9IjBzIiBmaWxsPSJm
cmVlemUiIGJlZ2luPSJfVGV4dF9Cb3gubW91c2VvdmVyIiAvPg0KICAgICAgICA8YW5pbWF0ZSB4
bGluazpocmVmPSIjX1RleHRfQm94IiBhdHRyaWJ1dGVOYW1lPSJmaWxsIiB2YWx1ZXM9IiNmZjAw
MDA7I2ZmZmZmZiIgZHVyPSIwcyIgZmlsbD0iZnJlZXplIiBiZWdpbj0iX1RleHRfQm94Lm1vdXNl
b3V0IiAvPg0KICAgICAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjX1RleHRfQm94IiBhdHRyaWJ1
dGVOYW1lPSJ0ZXh0LWRlY29yYXRpb24iIHZhbHVlcz0idW5kZXJsaW5lO25vbmUiIGR1cj0iMHMi
IGZpbGw9ImZyZWV6ZSIgYmVnaW49Il9UZXh0X0JveC5tb3VzZW91dCIgLz4NCiAgICA8L2c+DQog
IDwvc3ZnPg0KPC9ib2R5PiAgICANCjwvaHRtbD4NCg0KDQo=


--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit





<head>

<style type="text/css">
<!--

/* start of attachment style */
       .ygrp-photo-title{
         clear: both;
         font-size: smaller;
         height: 15px;
         overflow: hidden;
         text-align: center;
         width: 75px;
       }
       div.ygrp-photo{
         background-position: center;
         background-repeat: no-repeat;
         background-color: white;
         border: 1px solid black;
         height: 62px;
         width: 62px;
       }

       div.photo-title 
         a,
         div.photo-title a:active,
         div.photo-title a:hover,
         div.photo-title a:visited {
           text-decoration: none; 
       }

       div.attach-table div.attach-row {
         clear: both;
       }

       div.attach-table div.attach-row div {
         float: left;
         /* margin: 2px;*/
       }

       p {
         clear: both;
         padding: 15px 0 3px 0;
	 overflow: hidden;
       }

       div.ygrp-file {
         width: 30px;
         valign: middle;
       }
       div.attach-table div.attach-row div div a {
         text-decoration: none;
       }

       div.attach-table div.attach-row div div span {
         font-weight: normal;
       }

       div.ygrp-file-title {
         font-weight: bold;
       }
 /* end of attachment style */
        -->
        </style>
        </head>
<html>
<head>
<style type="text/css">
<!--
#ygrp-mkp {
  border: 1px solid #d8d8d8;
  font-family: Arial;
  margin: 10px 0;
  padding: 0 10px;
}

#ygrp-mkp hr {
  border: 1px solid #d8d8d8;
}

#ygrp-mkp #hd {
  color: #628c2a;
  font-size: 85%;
  font-weight: 700;
  line-height: 122%;
  margin: 10px 0;
}

#ygrp-mkp #ads {
  margin-bottom: 10px;
}

#ygrp-mkp .ad {
  padding: 0 0;
}

#ygrp-mkp .ad p {
  margin: 0;
}

#ygrp-mkp .ad a {
  color: #0000ff;
  text-decoration: none;
}
-->
</style>
</head>
<body>



<!-- |**|begin egp html banner|**| -->

<br><br>

<!-- |**|end egp html banner|**| -->


About the temporary hover effect itself, If there is no actual &quot;animation&quot; I recommend using the CSS class instead of animation/set because this is far simpler. Not tested if it works in IE but at least works in Firefox and Chrome. However, behaviors of the underline differ between FF and Chrome which is due to the xml:space=&quot;preserve&quot;. I suggest removing it unless there is a very specific text spacing you want from preserve.<br><span style="font-family:Courier New, courier, monaco, monospace, sans-serif;"><br>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xml:space=&quot;preserve&quot; id=&quot;root&quot; width=&quot;500pt&quot; height=&quot;375pt&quot; viewBox=&quot;0 0 20000 15000&quot
 ;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;style class=&quot;css/text&quot;&gt;<br>&nbsp;&nbsp;&nbsp; .texthover:hover {fill:#ff0000;text-decoration:underline}<br>&nbsp;&nbsp;&nbsp; &lt;/style&gt;<br>&nbsp;&nbsp;&nbsp; &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;20000&quot; height=&quot;15000&quot; style=&quot;fill:#000000; &quot; /&gt;<br>&nbsp;&nbsp;&nbsp; &lt;text class=&quot;texthover&quot; id=&quot;_Text_Box&quot; x=&quot;7400&quot; y=&quot;1820&quot; fill=&quot;#ffffff&quot; stroke=&quot;none&quot; style=&quot;font-weight:400px; font-size:320px; font-family:Verdana; baseline-shift:-100%;&quot;&gt;Text&lt;/text&gt;<br>&lt;/svg&gt;</span><br class="yui-cursor"><div class="ygroups-quoted"><br><br>---In [email protected], &lt;arfath_pasha@...&gt; wrote :<br><br><div id="ygrp
 s-yiv-2110775195"><p><span>Hi</span></p><p><span><br></span></p><p><span>I&#39;m experiencing a strange issue with mouseover in svg graphics where a mouseover on text is not changing the color in IE and Firefox but it is working fine with Chrome.</span></p><p><span><br></span></p><p><span>Here is the sample code</span></p><p><span><br></span></p><p><span>&lt;html encoding=&quot;UTF-8&quot; &gt;<br>&lt;body&gt;<br>&nbsp; &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xml:space=&quot;preserve&quot; id=&quot;root&quot; width=&quot;500pt&quot; height=&quot;375pt&quot; viewBox=&quot;0 0 20000 15000&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;set id=&quot;web_show&quot; attributeName=&quot;visibility&quot; attributeType
 =&quot;CSS&quot; begin=&quot;2s&quot; to=&quot;visible&quot;/&gt;<br>&nbsp;&nbsp;&nbsp; &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;20000&quot; height=&quot;15000&quot; style=&quot;fill:#000000; &quot; /&gt;<br>&nbsp;&nbsp;&nbsp; &lt;text id=&quot;_Text_Box&quot; x=&quot;7400&quot; y=&quot;1820&quot; width=&quot;2200&quot; fill=&quot;#ffffff&quot; stroke=&quot;none&quot; style=&quot;font-weight:400px; font-size:320px; font-family:Verdana; baseline-shift:-100%;&quot;&gt;Text &lt;/text&gt;<br>&nbsp;&nbsp;&nbsp; &lt;g id=&quot;_Text_Box_mouseovers&quot; &gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animate xlink:href=&quot;#_Text_Box&quot; attributeName=&quot;fill&quot; values=&quot;#ffffff;#ff0000&quot; dur=&quot;0s&quot; fill=&quot;freeze&quot; begin=&quot;_Text_Box.mous
 eover&quot; /&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animate xlink:href=&quot;#_Text_Box&quot; attributeName=&quot;text-decoration&quot; values=&quot;none;underline&quot; dur=&quot;0s&quot; fill=&quot;freeze&quot; begin=&quot;_Text_Box.mouseover&quot; /&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animate xlink:href=&quot;#_Text_Box&quot; attributeName=&quot;fill&quot; values=&quot;#ff0000;#ffffff&quot; dur=&quot;0s&quot; fill=&quot;freeze&quot; begin=&quot;_Text_Box.mouseout&quot; /&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animate xlink:href=&quot;#_Text_Box&quot; attributeName=&quot;text-decoration&quot; values=&quot;underline;none&quot; dur=&quot;0s&quot; fill=&quot;freeze&quot; begin=&quot;_Text_Box.mouseout&quot; /&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/
 g&gt;<br>&nbsp; &lt;/svg&gt;<br>&lt;/body&gt;&nbsp;&nbsp;&nbsp; <br>&lt;/html&gt;</span></p></div></div>



<!-- |**|begin egp html banner|**| -->

<br>


<br>

<!-- |**|end egp html banner|**| -->


<div width="1" style="color: white; clear: both;"/>__._,_.___</div>

      
  

    
    <div id="fromDMARC" style="clear:both; margin-top: 10px;">
         <hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
         Posted by: [email protected]         <hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
    </div>
<!-- Start Recommendations -->
<!-- End Recommendations -->


<!-- |**|begin egp html banner|**| -->

<br><br>
<tt>
-----<BR>
To unsubscribe send a message to: [email protected]<BR>
-or-<BR>
visit <a href="http://groups.yahoo.com/group/svg-developers">http://groups.yahoo.com/group/svg-developers</a> and click &quot;edit my membership&quot;<BR>
----</tt>
<br><br>

<!-- |**|end egp html banner|**| -->



<!-- |**|begin egp html banner|**| -->

  <img src="http://geo.yahoo.com/serv?s=97476590/grpId=1298421/grpspId=1706030390/msgId=66488/stime=1436153992" width="1" height="1"> <br>

<!-- |**|end egp html banner|**| -->

  
<!-- |**|begin egp html banner|**| -->

<br>



   
     
 
        <!-- |**|begin egp html banner|**| -->
        <div id="ygrp-vital" style="background-color: #f2f2f2; font-family: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">

        <span id="vithd" style="font-weight: bold; color: #333; text-transform: uppercase; "><a href="https://groups.yahoo.com/neo/groups/svg-developers/info;_ylc=X3oDMTJlbjl1MTAyBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQzNjE1Mzk5Mg--" style="text-decoration: none;">Visit Your Group</a></span>

     <ul style="list-style-type: none; margin: 0; padding: 0; display: inline;">
            <li style="border-right: 1px solid #000; font-weight: 700; display: inline; padding: 0 5px; margin-left: 0;">
      <span class="cat"><a href="https://groups.yahoo.com/neo/groups/svg-developers/members/all;_ylc=X3oDMTJmbjRrY2dmBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0MzYxNTM5OTI-" style="text-decoration: none;">New Members</a></span>
      <span class="ct" style="color: #ff7900;">1</span>
    </li>
                                              </ul>
  </div>


<div id="ft" style="font-family: Arial; font-size: 11px; margin-top: 5px; padding: 0 2px 0 0; clear: both;">
  <a href="https://groups.yahoo.com/neo;_ylc=X3oDMTJkcjRvMzc0BF9TAzk3NDc2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxNDM2MTUzOTky" style="float: left;"><img src="http://l.yimg.com/ru/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height="15" width="137" alt="Yahoo! Groups" style="border: 0;"/></a>
  <div style="color: #747575; float: right;"> &bull; <a href="https://info.yahoo.com/privacy/us/yahoo/groups/details.html" style="text-decoration: none;">Privacy</a> &bull; <a href="mailto:[email protected]?subject=Unsubscribe" style="text-decoration: none;">Unsubscribe</a> &bull; <a href="https://info.yahoo.com/legal/us/yahoo/utos/terms/" style="text-decoration: none;">Terms of Use</a> </div>
</div>

<!-- |**|end egp html banner|**| -->

  </div> <!-- ygrp-msg -->

   


  <br>

<!-- |**|end egp html banner|**| -->


<div style="color: white; clear: both;"/>__,_._,___</div>
</body>

</html>

--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV--