Leaderboard

This works with Firefox <script type='text/javascript'> $(function() { $(".circ3").mouseover(function() { $(this).css("fill", "red") $(this).css("fill-opacity", "1") $("#grp1").removeClass('txt1').addClass('txt2') }) $(".circ3").mouseout(function() { $(this).css("fill", "blue") $(this).css("fill-opacity", "0.3") $("#grp1").removeClass('txt2').addClass('txt1') }) }) </script> <style type='text/css'> .sv { stroke:#aa1111; border-radius:20px; border-width:2px; border-color:#ccc; box-shadow:2px 2px darkgray; background-blend-mode: normal; } .sv:hover { background-color: #ccffcc; fill:black; width : border-width:2px; border-color:red; background-blend-mode: difference; /*filter: blur(0.5px) grayscale(2%);*/ } .txt1 { fill: white; } .txt2 { fill: black; } </style> <svg class="sv" width="200" height="400" xmlns="http://www.w3.org/2000/svg"> <circle x="0" y="0" cx="120" cy="-20" r="150" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <text x="50" y="160" font-size="20px" font-family="monospace" font-style="italic"> TRIAL <tspan x="10" y="185">BANNER</tspan> </text> <circle x="20" y="200" cx="10" cy="480" r="250" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <circle x="60" y="230" cx="40" cy="460" r="250" style="fill:blue;fill-opacity:.3;stroke:blue;stroke-width:0" class='circ3' /> <g id='grp1' class='txt1'> <!-- In the context of SVG embedded in an HTML document, the XHTML namespace could be omitted, but it is mandatory in the context of an SVG document --> <text x='10' y='310' >having a div inside the</text> <text x='10' y='330' >svg might be the only</text> <text x='10' y='350' >way to do this correctly,</text> <text x='10' y='370' >time permitting</text> </g> </svg>