How to display a pointer when hovering over an icon

Question

Below I have a Jquery datepicker and a jquery timepicker (both trent richardson's 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 are accessed by the user clicking on an icon (a calender icon for datepicker and a clock icon for timepicker ('#durationpicker'). What my question is that how can I get it so that the pointer cursor appears when the user is hovering over the 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" />

Glint

Answer 1

.ui-datepicker-trigger{cursor:pointer}

Haustellum

does this go in the css or jquery? im guessing css – Glint

+1. CSS. .ui-datepicker-trigger is the default class of the icon in a jQuery datepicker. – Bursarial

yes in the css. its a cursor property for any markup that contains this class. – Connective

Answer 2

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

This works for me the jQuery way, you can include it in your script and it should not give you any issues. I'm using it myself for a project with both jQuery ThemeSwitcher and jQuery UI Themes.

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

Giraudoux

at the selector within the jQuery functions: $( ".datepicker" ).datepicker({your options}); $('.durationpicker').trenttimepicker({your options}); This way you can then made the adjustments based on the output to the browser like stated above for each of the jQuery libraries. I mention this because I had two datepickers on the same page and used this approach, which worked just fine. The accepted answer as well is not valid because being the css approach to the issue as does not have the hover attribute which is should work. Let us know please if that worked! :) – Giraudoux

Answer 3

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

#durationpicker, #datepicker {
cursor: pointer;
}

Burgrave

I think you're right but just need to add :hover to the end of the selector. – Hemmer

That does it for the textbox, I want it for the icon next to the textbox, not the textbox. If you look at the functions it is the buttonImage I want to display a pointer cursor when hovering over the icon – Glint

You add :hover only if you want the pointer to appear when hovering. Same goes for :focus. – Burgrave

try with #durationpicker img, #datepicker img {cursor:pointer;} – Burgrave

nope, still doing the same thing. I included the html in the question. I belive it can only be done in the jquery code because the icons are built in if you know what I mean – Glint

Answer 4

.ui-state-hover {
        cursor: pointer !important;
    }

Work for me

Cepheus