How to display the cursor when you hover over an icon

Question

Below I have jquery datepicker and jQuery timepicker (both trent richardson datepicker and timepicker)

$(function() { $( "#datepicker" ).datepicker({minDate: 0, dateFormat: "dd-mm-yy", showOn: "button", buttonImage: "Images/calendar.gif", buttonImageOnly: true}); }); $('#durationpicker').trenttimepicker({ timeFormat:'hh mm ss', hourGrid: 4, minuteGrid: 10, secondGrid: 10, showOn: 'button', buttonImage: "Images/clock.gif", buttonImageOnly: true }); }); 

Now both datepicker and timepicker users access the user by clicking on the icon (calendar icon for datepicker and watch icon for timepicker ('#durationpicker'). What is my question is how can I get it so that the cursor pointer appears when Does the user hover over two icons?

Below is the html:

 <p><strong>3: Duration:</strong> <input type="text" id="durationpicker" name="durationChosen" readonly="readonly" /> <p><strong>4: Date:</strong> <input type="text" id="datepicker" name="dateChosen" readonly="readonly" /> 

Answer 1

 .ui-datepicker-trigger{cursor:pointer} 

Answer 2

  $( ".ui-datepicker-trigger" ).css('cursor','pointer'); 

This works for me in a jQuery way, you can include it in your script, and it should not give you any problems. I myself use it for a project with jQuery ThemeSwitcher and jQuery UI Themes.

This is a wild guess, but you need to take you to where you need :)

Answer 3

If I understand your question, you need to add the following CSS for both icons

 #durationpicker, #datepicker { cursor: pointer; }