Change image in a hyperlink on mouseover

 

1. Include below CSS  in header 

 <style>
.answer { }
.answer div { }
.answer-tab { }
</style>

2. Add below code in new JS file 

(you can change event eg. Click or hover)

$(function(){
   
    $(".answer")
        .hide();
   
    $("dl.faq dt")
        .append("<br /><a href='#' title='Answer' class='tab'>Answer</a>");
       
    $(".answer-tab")
        .hover(function(){
            $(this)
                .parent().parent()
                .find(".answer")
                .slideToggle();
            return false;
        });
});

3. Include Lib and new above created file  in header

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

4. Add below code in body section:

<a href="#" title="#" class="answer-tab">show</a> 

<img src="demo.jpg" alt="" class="answer"  />