I have successfully created a menu using CSS and JavaScript that reveals images and text upon hovering over the menu sections. However, I am facing an issue where the colors of the menu items revert back after hovering out.
You can view the website here:
Below are the CSS and JS codes used:
.product-block-botton {
border-right:#ffffff solid 1px;
text-align:center;
vertical-align:middle;
font-size:16px;
padding:5px;
height:30px;
color:#ffffff;
}
.product-block-botton:hover {
color:#000000;
}
.last-button {
border:none;
}
.type1 {
background-color:#B83E6C;
cursor:pointer;
width:25%;
}
HTML
<table class="product-block">
<tr>
<td colspan="4" class="product-block-head">CHOISISSEZ VOTRE SAC
</td>
</tr>
<tr>
<td class="product-block-botton type1">Sac Papier Luxe</td>
<td class="product-block-botton type1">Sac Poignées Torsadées</td>
<td class="product-block-botton type1">Sac Poignées Plates</td>
<td class="product-block-botton last-button type1">Sac Réutilisable</td>
</tr>
</table>
JS
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(e) {
$j('.product-block-botton').each(function(index, element) {
$j(this).hover(function(){
$j('.categories').hide();
$j('.categories').eq(index).show();
});
});
});
</script>
I hope this explanation is clear and thank you in advance for your help.