html - Switching image on hover in a button -
i'm trying change image placed in button on hover. far, have managed image change when hover on not when button hovered. here code.
<style> .btn-large{ width: 300px; height: 350px; } .movie{ width: 90px; height: 90px; position: relative; margin-top: 25px; } #hardware:hover, #hardware:active{ background: #23c6c8; color: white; } </style> <a href="#" class="btn btn-large" id="hardware"> <figure> <img class="movie" alt="ticket" src="http://i.imgur.com/u8wsffl.png" onmouseover="this.src='http://i.imgur.com/buk26gd.png'" onmouseout="this.src='http://i.imgur.com/u8wsffl.png'" /> </figure> <div class="details"> <h2>all tickets</h2></br> <p>view tickets</p> </div> </a>
you need move event handlers anchor instead of img
, search img tag
<a href="#" class="btn btn-large" id="hardware" onmouseover="this.getelementsbytagname('img')[0].src ='http://i.imgur.com/buk26gd.png'" onmouseout="this.getelementsbytagname('img')[0].src = 'http://i.imgur.com/u8wsffl.png'"> <figure> <img class="movie" alt="ticket" src="http://i.imgur.com/u8wsffl.png" /> </figure> <div class="details"> <h2>all tickets</h2></br> <p>view tickets</p> </div> </a>
Comments
Post a Comment