First we will create a section of slider content where we will put the content of slider. Slider heading and content will change on mouser hover. Also we can change slider content using hover functionality or click functionality only need to do simple change like only need to change hover text to click text.
In the below code of slider. There are three li label(2012, 2000 and 1999). When user will hover on these label of li then the content of related these li label will automatically change on hover effect.
We have three tab panel and we have content in panel according to li labels. Like if you want to change the content of 2012 then change the inner content of li’s id “ert_pane1-0” so this is the same process for other panels.
Paste the below code on page template or in page text editor.
In the below Jquery we will add the hover functionality on slider. When the user will hover on first label then the content of first tab panel will display.
How this Jquery will work ?
In this Jquery, First we will remove the active from all li and after that we will insert the active class on particular li on which we will hover. We will get the hyper link and we will add active class on that particular hyperlink tab panel.
After this Jquery we will add the CSS to make the hide and show effect active. Using Jquery will only add the active class and Using CSS we will hide/show the section.
Using the below CSS We will hide/show the section.
Using the above code we can display the section on hover effect using Jquery and CSS.
Need to paste the content code according to there supporting file like
Slider content code=> Paste this code in page template or in editor text.
Jquery Code=> Paste this code in header file or footer file.
CSS Code=> Paste this code in style.css file.To change the slider effect hover to click need to change use below code: