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

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

1 个答案: