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

demo

<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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -