如何仅使用 css 或 css+jquery 构建悬停效果

Question

你能帮我建立悬停效果吗，就像截图一样，只有 css？或者，使用 css+jquery。谢谢]1

Answer 1

1 使说明可见 2 定位 3 利润

来自工作站点的示例

css:

.m-gallery-product-item .hover-wrap {
    display: none;
    height: 0;
}


.m-gallery-product-item .item-main:hover .hover-wrap {
    display: block;
    position: relative;
    z-index: 3;
}

html:

<div class="m-gallery-product-item">
 <div class="item-main">...
  <div class="item-img">,</div>
  <div class="item-info">,</div>
  <div class="hover-wrap"> 
   <div class="hover-main">
    <div class="tags"> ,,,,,,,,, </div> 
   </div> 
  </div>
 </div>
</div>

查看 ebay.com alibaba.com 上的工作示例，许多大型和流行的销售网站使用该标记很长时间，只需将其复制粘贴到您的代码中即可！

如何仅使用 css 或 css+jquery 构建悬停效果

How to build a hover effect with css only, or css+jquery

css

jquery

hover