OnMouseOver Backgroung color in listview items

2 posts, 0 answers
  1. shahin4u
    shahin4u avatar
    2 posts
    Member since:
    Apr 2011

    Posted 12 Apr 2011 Link to this post

    I am using a RadListView. now I would like to single item background color on MouseOver and on Mouse Out.now i use a  a CSS on mouseover,
    <style type="text/css">
    .normal { background-color: #000000 }
    .normalActive { background-color: #999999 }

     it change colored all item. but i need single item. any solution???
  2. Galin
    Galin avatar
    526 posts

    Posted 14 Apr 2011 Link to this post

    Hello Shahin,

    To do this you need to add a special CSS class to wrapper in your ItemTemplate. For example if you have a field "country" in your database and want to add this class to all from Mexico:
         <fieldset runat="server" class='<%# Eval("Country").Equals("Mexico") ? "fieldMexico":null %>' >

    And add the following CSS:
        background-color: #000;
        color: #ddd;
    .fieldMexico_active, /*For IE6*/
        background-color: #999;
        color: #333;

    Also use this javascript for fixing the IE 6 hover bug:
    if($telerik.isIE6) {
                $telerik.$(this).bind('mouseover', function(){$telerik.$(this).addClass('fieldMexico_active')}).bind('mouseout', function(){$telerik.$(this).removeClass('fieldMexico_active')});

    Please find in attached file a runable project with the upper example.

    All the best,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top