Good day. I use this code. But it does not work to display the second picture when you hover the mouse.

<style> #RollOver1 a .hover { visibility: hidden; } #RollOver1 a img { position: absolute; z-index: 1; border-width: 0; } #RollOver1 img { border-width: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; </style> <div id="RollOver1" style="position:relative;left:580px;top:-10px;overflow:hidden;width:64px;height:71px;z-index:18;"> <a href="http://broker-sb.ru/wp-content/uploads/2016/04/Protivodeistvie_korrupcii.pdf" target="_blank"> <img class="hover" alt="" src="http://broker-sb.ru/wp-content/uploads/2016/04/doc3.png"/> <span><img alt="" src="http://broker-sb.ru/wp-content/uploads/2016/04/doc1.png"/></span> </a> </div>

Where can there be a mistake? Took an example from another site ...

    1 answer 1

    That solved your problem in another way:

      .img { display:block; width: 500px; height: 500px; background:url(http://broker-sb.ru/wp-content/uploads/2016/04/doc1.png); background-repeat: no-repeat } .img:hover { background:url(http://broker-sb.ru/wp-content/uploads/2016/04/doc3.png); background-repeat: no-repeat } 
     <a class="img" target="_blank" href="http://broker-sb.ru/wp-content/uploads/2016/04/Protivodeistvie_korrupcii.pdf"></a>