How to change cursor to "finger pointer" when rolling over hide/show text (javascript) -

on website have hide/show javascript (below). used commonly in faqs see list of questions , when rolling on question changes color , clicking on opens text.

i cursor change "finger pointer" (the usual shape of when linked) when rolling on text.

what should added code below?

the words text represent various text put in specific site.

thank you!

<a onclick="javascript:showhide('item')"> text </a> <div class="mid" id="item" style="display: none;"><p> text </p></div> <br>  <script type="text/javascript">// <![cdata[     function showhide(divid)     {         if(document.getelementbyid(divid).style.display == 'none')         {             document.getelementbyid(divid).style.display='block';         }         else         {             document.getelementbyid(divid).style.display = 'none';         }     }     // ]]> </script> 

add cursor: pointer; css rule:

<a style="cursor:pointer;" onclick="javascript:showhide('item')"> text </a> 

also, can make js bit prettier:

<script>// <![cdata[ function showhide(divid){    var el = document.getelementbyid(divid);    el.style.display = el.style.display === "none" ? "block" : "none"; } // ]]></script> 

i advise you: don't use inline styles.
create stylesheet, use classes, style classes, , assign classes html elements.

for example:

a {     cursor: pointer;     text-decoration:none;     color: orange;     /* etc... style here anchors */ } a:hover {     /* place here style hovered anchors */ } .hidden {   /* add class html element want hidden */     display:none; }