HTML Elements › Forums › Navigation › Tabs › Header scoll buttons on hover
This topic contains 1 reply, has 2 voices, and was last updated by Anonymous 2 years, 10 months ago.
- AuthorPosts
- June 18, 2018 at 1:03 pm #98891
AnonymousHi,
I want the scroll buttons that are in the header to be hidden and only when i hover over the element to see them. Is this possible ? If it is please share a code snipped to demonstrate how to do that.Thank you!
June 19, 2018 at 2:39 pm #98898
AnonymousHi john1987,
in order to control the visibility of the scroll buttons inside the header section of the element you simply need to changed the <b>overview</b> property to ‘hidden’. When you want to see the buttons again just set the value of the property back to it’s default value ‘auto’. Here’s how to do it:<script> window.onload = function () { var tabs = document.querySelector('smart-tabs'); tabs.addEventListener('mouseenter', function (event) { this.overflow = 'auto'; }); tabs.addEventListener('mouseleave', function (event) { this.overflow = 'hidden'; }); } </script> </head> <body> <smart-tabs> <smart-tab-item label="TAB 1">Content 1</smart-tab-item> <smart-tab-item label="TAB 2">Content 2</smart-tab-item> <smart-tab-item label="TAB 3">Content 3</smart-tab-item> <smart-tab-item label="TAB 4">Content 4</smart-tab-item> <smart-tab-item label="TAB 5">Content 5</smart-tab-item> <smart-tab-item label="TAB 6">Content 6</smart-tab-item> <smart-tab-item label="TAB 7">Content 7</smart-tab-item> <smart-tab-item label="TAB 8">Content 8</smart-tab-item> <smart-tab-item label="TAB 9">Content 9</smart-tab-item> <smart-tab-item label="TAB 10">Content 10</smart-tab-item> <smart-tab-item label="TAB 11">Content 11</smart-tab-item> </smart-tabs> </body>
If you have further questions feel free to ask.
Best Regards,
ChristopherSmart HTML Elements Team
https://www.htmlelements.com - AuthorPosts
You must be logged in to reply to this topic.