我下面有一个半工作脚本。唯一的问题是父元素在悬停后也消失了。我也无法淡入/淡出工作。
有任何想法吗？
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>
我在您发布的代码中看不到淡入/淡出功能，因此无法解决。
给定您发布的内容，将会删除.stop()，.toggle()因为尚不清楚这些功能应该从您发布和使用的代码中执行什么工作，因为这些代码visibility隐藏了元素，但该元素仍然占用了文档布局中的空间。
$('.homeHover').hover(
function () {
$(this).find('span').css("visibility", "visible");
},
function () {
$(this).find('span').css("visibility", "hidden");
}
);
如果要坚持使用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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句