Changing cursor when mouse over

4 posts, 1 answers
  1. Jones
    Jones avatar
    14 posts
    Member since:
    Sep 2009

    Posted 01 Sep 2009 Link to this post

    Hello,

    can someone tell me how to Change the cursor when the mouse cursor is on an item? In my application it is possible to click on an item. Unfortunately I cant't figure out how to change the cursor from default do pointer when the Mouse gets over. If its possible I'd like to have the change on the image and the text below as well. Also, I'd like to change something in my CSS or my application instead of changing something in the telerik css files.

    Thanks in advance
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 01 Sep 2009 Link to this post

    Hi Jones,

    Different browsers mean different cursors for the "default" and "pointer" values, so the best in this case should be to speak in common terms - what cursor do you need - "hand" or "arrow"? Also, we need a sample project or at least the server declaration of RadRotator in order to see on what HTML element you need the cursor applied.

    Regards,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jones
    Jones avatar
    14 posts
    Member since:
    Sep 2009

    Posted 02 Sep 2009 Link to this post

    Hello,

    I need the Hand as Cursor. Attached you find the ASPX-Code of the page I'm using the rotator. If you have further questions, do not hesitate to contact me.
    Thanks

    <telerik:RadRotatorItem runat="server" id="RotatorItem1" onclientclick="return DeleteFields()">
                <ItemTemplate>
                  <div style="PADDING-TOP: 15px">
                    <asp:Image id="RotatorImage1" runat="server" imageurl="~/images/Rotator/3_EC-Radialgeblaese_130px.JPG"></asp:Image>
                    <asp:Label id="RotatorLabel1" style="font-weight: bold; background-color: #ffffff; font-size: 9pt" runat="server" text="Motor:" font-names="Arial" font-bold="True" forecolor="#919EA7"></asp:Label>
                  </div>
                </ItemTemplate>
              </telerik:RadRotatorItem>

    As you can See, each RotatorItem has a Label and an image. I change the text of the label and the image during the running time. I'd like to have the hand cursor when the mouse is over the image or over the label. How can I manage this?
  5. Answer
    Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 02 Sep 2009 Link to this post

    Hello Jones,

    Here is a small sample that I believe fits your requirements:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <style type="text/css"
            .itemTemplate 
            { 
                cursor: pointer; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <telerik:RadRotator ID="RadRotator1" runat="server" Width="100" ItemWidth="100" Height="100" 
            ItemHeight="100" FrameDuration="1000"
            <Items> 
                <telerik:RadRotatorItem> 
                    <ItemTemplate> 
                        <div class="itemTemplate"
                            <asp:Image ID="Image1" runat="server" CssClass="itemTemplate" ImageUrl="Thumbs/image1.jpg" 
                                AlternateText="IMAGE" /> 
                        </div> 
                    </ItemTemplate> 
                </telerik:RadRotatorItem> 
                <telerik:RadRotatorItem> 
                    <ItemTemplate> 
                        <div class="itemTemplate"
                            <asp:Image ID="Image1" runat="server" CssClass="itemTemplate" ImageUrl="Thumbs/image2.jpg" 
                                AlternateText="IMAGE" /> 
                        </div> 
                    </ItemTemplate> 
                </telerik:RadRotatorItem> 
                <telerik:RadRotatorItem> 
                    <ItemTemplate> 
                        <div class="itemTemplate"
                            <asp:Image ID="Image1" runat="server" CssClass="itemTemplate" ImageUrl="Thumbs/image3.jpg" 
                                AlternateText="IMAGE" /> 
                        </div> 
                    </ItemTemplate> 
                </telerik:RadRotatorItem> 
            </Items> 
        </telerik:RadRotator> 
        </form> 
    </body> 
    </html> 
     

    As you can see, you can add a div element that wraps the content in the ItemTemplate and apply a CSS class to it. In the CSS class's declaration you need to specify the cursor that you need to appears when the rotator's content is hovered by the mouse pointer.

    Regards,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top