How to display Prev/Next buttons on a Nivo slider when MouseOver

Most of slider effects will display the Prev/Next buttons by default once you open the page that contain a slider effect. Whether you build a slider for a CMS or a shopping cart or a regular HTML page, you can be able to change the codes in CSS and slider block on your HTML page. Here’s how you do it.

Open the CSS file that supports the slider, add a style for the Prev/Next layer. Hide the layer on display first.

.parent .navigation-links { display:none; }
.parent:hover .navigation-links { display:block; }

Then open the HTML file where the slider layer is located. Add the parent layer as a container for both Prev/Next button.

<div>
<div> <!-- other codes are located here --></div>
<div>
<a id="prevslide"></a>
<a id="nextslide"></a>
</div>
</div>

Now you should enjoy the desired effect.