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

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)   

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

对于每个类别缩略图，请包含包含子类别的所有超链接的div，为其指定position: absolute并设置默认display:none。

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

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