This is a migrated thread and some comments may be shown as answers.

Style question - keep parent style when selecting child item

1 Answer 128 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Joel Register
Top achievements
Rank 1
Joel Register asked on 23 Dec 2013, 06:16 PM
I have a demo my problem online -- as you can see, I have a problem when selecting a child under Secondary Reviews or Primary Reviews. 

I want the child items to remain as they are when you mouse over them or to just set text-decoration to underline. When you click on a child item, the parent should remain unchanged and the text of the child item should turn blue. 

All styles are inline in the index.html page. 

I know I'm missing something obvious here but just can't figure out how to change that child style without that change affecting the parent tem's style.

Thanks for any help! 

Joel


1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 24 Dec 2013, 07:53 AM
Hello Joel,

You can use the classes that are applied to the child elements when they are hovered or clicked - k-state-hover and k-state-selected to apply the CSS rules that you need. You can check this in the following demo:

http://jsbin.com/EBujumi/1/edit

As for retaining the selected state of the parent element you will need to implement some custom JavaScript code to run on the select event of the panelbar and apply the k-state-selected class on the parent element. You can check a simple example here:

http://jsbin.com/otomUrU/1/edit

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
PanelBar
Asked by
Joel Register
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or