使用Jquery

Question

我在下面的表单中使用helpIcon表示每个带描述的表单元素。 当我们使用jquery悬停在帮助图标和mouseout时，我们如何显示帮助？ 我为jquery退出了新的东西。所以请有人给出简单的实现吗？

    <table>
    	<tbody>
    		<tr><td>
    			Name:
    		</td>
    		<td>
    			<input type="text" name="name" class="dipika">
    		</td>
    		<td>
    		<img src="help.png" id="imgNamehelp">
    		</td>
    		<td><div id="divNamehelp" style="display: none;"> This is Full Name</div></td>
    		</tr>
    		<tr><td>
    			Color:
    		</td>
    		<td>
    			<input type="radio" value="red" name="Color" class="dipika"> Red
    			<input type="radio" value="yellow" name="Color" class="dipika"> Yellow
    		</td>
    		<td>
    		<img src="help.png" id="imgColorhelp">
    		</td>
    		<td><div id="divColorhelp" style="display: none;"> This is color choice</div></td>
    		</tr>
    		<tr><td>
    			Hobbies:
    		</td>
    		<td>
    			<input type="checkbox" value="cricket" name="cricket" class="dipika"> Cricket
    			<input type="checkbox" value="kabdi" name="kabdi" class="dipika"> Kabadi
    		</td>
    		<td>
    		<img src="help.png" id="imgHobbieshelp">
    		</td>
    		<td><div id="divHobbieshelp" style="display: none;"> This is Hobbies choice</div></td>
    		</tr>
    		<tr><td>
    			Address:
    		</td>
    		<td>
    			<textarea class="dipika"></textarea>
    		</td>
    		<td>
    		<img src="help.png" id="imgAddresshelp">
    		</td>
    		<td><div id="divAddresshelp" style="display: none;"> This is Hobbies choice</div></td>
    		</tr>
    	</tbody>
    </table>

有人可以帮忙解决这个问题吗？提前谢谢。

Answer 1

$(document).ready(function(){

            $('img[src="help.png"]').mouseover(function(){

                $('#'+getDivId(this)).fadeIn(500);
            }).mouseout(function(){

                $('#'+getDivId(this)).fadeOut(500);
            });
            function getDivId(helpId){
                var helpId = $(helpId).attr('id');
                return helpId.replace('img','div');
            }

    });

Answer 2

$(document).ready(function(){

            $('img[src="help.png"]').hover(function(){

                $('#'+getDivId(this)).fadeIn(500);
            },function(){

                $('#'+getDivId(this)).fadeOut(500);
            });
            function getDivId(helpId){
                var helpId = $(helpId).attr('id');
                return helpId.replace('img','div');
            }

    });