I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simply appearing.
The challenge lies in using an e-commerce platform with a prebuilt template for displaying items, where all HTML is generated automatically and each item carries only a css class without a specific ID.
Below is a snippet of the HTML structure:
<td class="hoverClass">
<--Irrelevant code removed-->
<table class="otherClass" cellspacing="0" cellpadding="0" width="100%" style="height: 158px; width: 190px;">
<removed>
</table>
<table class="appearClass" cellspacing="0" cellpadding="0" width="100%" style="margin-bottom: 0px;">
<removed>
</table>
</td>
My objective is to trigger the appearance of .appearClass when hovering over .hoverClass. My initial approach involved dynamically assigning IDs to these classes through JavaScript for JQuery's slideToggle functionality.
<script>
var x = document.getElementsByClassName("hoverClass");
var y = document.getElementsByClassName("appearClass");
var thumbArray = [];
var footArray = [];
for(var i = 0; i < x.length; i++)
{
thumbArray.push("catThumb" + i);
footArray.push("catFoot" + i);
x[i].id = thumbArray[i];
y[i].id = footArray[i];
}
for(var j = 0; j < x.length; j++)
{
$("#" + thumbArray[j]).hover(function(){
$("#" + footArray[j]).slideToggle();
});
}
</script>
The issue arises when all custom hover IDs end up connected to the last instance of appearClass. In simpler terms, if there are 10 items and this script is used, hovering over any item will only trigger the slide effect on the 10th item.
I'm seeking advice on how to properly link the hover IDs to their corresponding appear IDs for individual instances.