flex: граница появляется при наведении указателя мыши на сетку данных, содержащую контейнер с изменяемым оформлением

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

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

Мне сказали перейти с 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>

The item renderer code is as follows

    <?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>![enter image description here][2]