Remove Hover Styling on Kendo Treeview

Question

I am trying to remove the hover styling on the kendoui treeview component so that when you hover over an item in the treeview it does not have a border / background image etc. I have gotten rid of everything but the border as it looks like there are additional styles that are at play that I cannot seem to locate. Here is my css so far... (in addition to the default theme)

  .k-treeview .k-in.k-state-hover{
    background-image:none;
    background-color:#fff;border:none;


}

.k-treeview .k-in.k-state-selected{
    background-image:none;
    background-color:#fff;color:#000;border:none;}

Currently it is just showing a border which looks to be black as opposed to the grey one that was there before I added the styles above... Any idea what I can do to get rid of this stubborn border?

Answer 1

With the addition of this style embedded on the page I was able to get it to do what I wanted. I believe this was partially related to how the css was being loaded (order) in multiple different sharepoint webparts on the same page...

.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
    border-style: none;
    border-width: 0;
    padding: 2px 4px 2px 3px;
}