javascript - 如何在鼠标悬停时获取图像上的超链接？

Question

我正在制作一个电子商务在线购物网站。我希望我的页面看起来像 Flipkart 一样。像这样

主要品类图片

在鼠标上显示所有子类别的所有超链接

我的桌子是

ProductCategory
Column Name  Data Type  Constraint
CategoryID   Varchar(20)    Primary key
CategoryName Varchar(100)   Unique key
Description  Varchar(1000)  


ProductSubCategory
Column Name     Data Type   Constraint
SubCategoryID   Int    Auto increment , Primary key
SubCategoryName Varchar(100)    
Description     Varchar(1000)   
CategoryID      Varchar(20) Foreign key with Product Category

ProductSubCategory2
Column Name         Data Type   Constraint
SubCategory2ID       Int    Auto increment , Primary key
SubCategory2Name    Varchar(100)    
Description         Varchar(1000)   
SubCategoryID        Varchar(20)    Foreign key with Product SubCategory

CompanyInfo

Column Name Data Type   Constraint
CompanyID   Varchar(20) Primary key
CompanyName Varchar(100)    Unique key
Description Varchar(1000)   

 </p>

ProductInfo
Column Name Data Type   Constraint
ProductID   Int Primary key , auto increment
ProductName Varchar(100)    
SubCategory2ID  Int Foreign key with ProductSubCategory
CompanyID   Varchar(20) Foreign key with CompanyInfo
Price   Float   
Quantity    Int 
Description Varchar(1000)   

所以请帮助我进行连接查询以显示每个类别的唯一图像，并在鼠标悬停时显示子类别的超链接请帮助我从数据库中获取图像并为该图像应用 css 或 javaquery

Answer 1

我认为这就是您正在寻找的http://webdesign.about.com/od/dhtml/a/aadhtmlmenus.htm使您能够使用 :hover 伪类来显示一个菜单，您可以在其中拥有您的子类别。

希望这可以帮助

Answer 2

对于每个类别 thumb，包括一个包含子类别的所有超链接的 div，给它一个position: absolute并设置默认值display:none。

然后在悬停时（您可以使用 css 或 jquery）将 css 属性更改为display: block.

此外，根据您的设计结构，您可能还希望z-index为超链接 div 包含更高的 css 属性