flex: граница появляется при наведении курсора на элемент управления List

Question

У меня есть проект, в котором я отображаю контент из массива. Мне также нужно отображать рейтинги - от 1 до 5 звезд

отлично работает с правильным альтернативным затенением для каждой строки - , однако , когда я нахожу курсор мыши, обработчик скинов в элементе рендеринга предметов (с именем cont) все еще сохраняет исходный цвет, который он имел для этой строки. Так как мы используем fxg graphics, у нас есть контейнер с скинами, содержащий рейтинги с одним оттенком, который находится внутри большой таблицы - с изменением цвета строки при наведении курсора мыши. Прикрепленный снимок экрана: при наведении курсора мыши вы видите тонкую полоску между полем оценок и выделенной строкой ...

Мне сказали, чтобы перейти от Datagrid к List, чтобы решить эту проблему и улучшить производительность, - похоже на большую задачу, которую я испортил. В качестве более легкой альтернативы искал Я хотел бы либо а) сделать так, чтобы цвет контейнера с обложкой исчезал, поэтому при наведении курсора я вижу один цвет подряд б) отключить изменение цвета при наведении курсора на строки сетки, чтобы избежать этой проблемы

Спасибо

Сетка данных очень проста, как показано ниже

<mx:DataGrid id="experimentgrid" fontSize="{12}"  fontWeight="bold" color="#006837" styleName="dataGridStyle" rowHeight="{15}" borderVisible="false" showHeaders="false" x="{20}" y="{50}"  width="{900}" height="{350}"   dataProvider="{arr_expList}" itemClick="onItemExp(event);" creationComplete="setColWidths()" verticalScrollPolicy="auto" verticalScrollBarStyleName="scrollStyle" >
     <mx:columns>
<mx:DataGridColumn id="col11" dataField="no"  resizable="true" />
<mx:DataGridColumn id="col12" dataField="Name" resizable="true" />
<mx:DataGridColumn id="col13"  dataField="Rating" itemRenderer="itemRenderers.experimentGriditemRender" resizable="true"/>      
</mx:columns>

Код визуализации элемента выглядит следующим образом

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
focusEnabled="true">

    <fx:Script>
        <![CDATA[
            import assets.graphics.dotrating;

            import mx.controls.dataGridClasses.*;
            import mx.events.FlexEvent;

            import spark.core.SpriteVisualElement;
            private var mydot:SpriteVisualElement;

            override public function set data(value:Object):void
            {               
                if(value != null)
                {       
                    cont.removeAllElements();       
                    for(var i:int=0;i<value.Rating;i++)
                    {
                        mydot = new dotrating();
                    //600 is a stand-in for some calculations   
                        mydot.x= (600*0.02)+(i*600*0.02);
                        mydot.y= (600*0.012);
                        //mydot.x = (i*600*0.02);                       
                        mydot.height = 600*0.013;
                        mydot.width = 600*0.013;                        
                        cont.addElement(mydot);
                    }                   
                }
            }


        ]]>
    </fx:Script>
    <s:SkinnableContainer id = "cont" top="0" left="0" right="0" bottom="0" height="{600*0.02}">

    </s:SkinnableContainer>
</s:MXDataGridItemRenderer>