Change custom tool imageUrl on mouseover

4 posts, 0 answers
  1. Nelbin
    Nelbin avatar
    15 posts
    Member since:
    Jul 2013

    Posted 15 Aug 2013 Link to this post

    Is there any function/javascript regarding mousever event? I want to change the image of my custom tool once it is hovered by the mouse pointer. Thanks in advance!
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Aug 2013 Link to this post

    Hi Nelbin

    Try the following CSS to change custom ImageUrl on mousehovering.
    <style type="text/css">
     .RadImageEditor .rieInsertImage .rtbIcon:hover

  3. DevCraft R3 2016 release webinar banner
  4. Nelbin
    Nelbin avatar
    15 posts
    Member since:
    Jul 2013

    Posted 18 Aug 2013 Link to this post

    HI Shinu,

    the CSS isn't working. I tried that too but still not executing. FYI I also have two custom buttons in the ImageEditor
  5. Vessy
    Vessy avatar
    1353 posts

    Posted 20 Aug 2013 Link to this post

    Hello Nelbin,

    The provided by Shinu approach is the correct one, I guess that you will need to use a little bit heavier selectors in order to apply those styles to your custom buttons:
    .RadImageEditor .rieInsertImage.rieBackgroundImg span.rtbIcon:hover
        background-image: url('yourimage.gif');
        background-position: center;

    Another thing you can try is to add !important to the styles:
    .RadImageEditor .rieInsertImage.rieBackgroundImg span.rtbIcon:hover
        background-image: url('yourimage.gif') !important;
        background-position: center !important;

    Note, that in order to apply the styles above the highlighted part of the selector have to be exactly the same like the custom CommandName that you want to apply them to.

    Veselina Raykova
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top