jquery - 如何将显示从无切换到表格单元格？

Question

我下面有一个半工作的脚本。唯一的问题是悬停后父元素也会消失。我也无法让淡入/淡出工作。

有什么想法吗？

html

 <div class="group mt10">
     <div class='col2 pull-left homeTile' style="margin-right:10px;">
         <a class='homeHover' title="Weddings" href='#' style="background-image:url(../img/wedding-cake.jpg);">
             <span>Weddings</span>
         </a>
     </div>
     <div class='col2 pull-left homeTile'>
         <a class='homeHover' title="Weddings" href='#' style="background-image:url(../img/wedding-cake.jpg);">
             <span>Weddings</span>
         </a>
     </div>
</div>

JS

 <script>

 $(document).ready(function() {  

     $('.homeHover').css("display", "table" );    

     $('.homeHover').hover(function() { 

         $(this).find('span').stop().toggle().css("display", "table-cell" ); 
     },  
     function(){ 

         $(this).find('span').stop().toggle().css("display", "none" ); 
     });      
  });          
</script>

Answer 1

我在您发布的代码中没有看到淡入/淡出，因此无法解决该问题。

鉴于您发布的内容，将删除 .stop() 和 .toggle() 因为不清楚这些函数应该从代码中执行什么操作您发布并使用 visibility 隐藏了该元素，但该元素仍然占用文档布局中的空间。:

$('.homeHover').hover(
     function () {
         $(this).find('span').css("visibility", "visible");
     },
    function () {
         $(this).find('span').css("visibility", "hidden");
     }
 );

Visibility Fiddle

如果您想坚持使用从文档布局中完全删除元素的 display，则需要为 a 元素提供一些尺寸，以便 a 元素不会完全消失(从技术上讲，a 仍然存在，只是现在里面什么都没有，所以你看不到任何东西):

$('.homeHover').hover(
     function () {
        $(this).find('span').css("display", "table");
     },
     function () {
         $(this).find('span').css("display", "none");
     }
 );

(仅使用100px作为示例):

.homeHover {
    width: 100px;
    height: 100px;
}

Display Fiddle