Question

今天我尝试使用jQuery悬停效果，但它没有像我预期的那样好用。当我将鼠标悬停在div元素上以显示第一个div元素的其他div元素时，它们都开始闪烁。

JS代码如下。

$(document).ready(function () {
$('.section-text').hide();


$('.section-item-portal').mouseenter(function () {
    $('.section-text').fadeIn();
    $(this).fadeOut();
});

$('.section-item-portal').mouseleave(function () {
    $('.section-text').fadeOut();
    $(this).fadeIn();
}); });

以下是链接http://jsfiddle.net/DXRxA/6/

请帮助解决此问题。

谢谢！

Answer 1

其中一个解决方案是设置opacity的动画 - 这会使元素在变为不可见时仍然占据其原始空间，而如果你执行fadeOut，它将获得display: none你不想要的跳跃效果。

（想想display:none与visibility:hidden）

请参阅此处的解决方案：

http://jsfiddle.net/ow6o9n1t/

＆＃13;

$(document).ready(function () {
    $('.section-text').hide();

    
    $('.section-item-portal').mouseenter(function () {
        $('.section-text').fadeIn();
        $(this).animate({opacity: 0});
    });

    $('.section-item-portal').mouseleave(function () {
        $('.section-text').fadeOut();
        $(this).animate({opacity: 1});
    });

});

＆＃13;

.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
}
.section-text {
	position: absolute;
	width: 217px;
	background-color: rgba(0,0,0,0.53);	
	color: #fff;
	padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-item-portal">
   
</div> <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>

＆＃13;

更新

既然你说你想要元素互相替换，那么这里有一个简单的CSS解决方案（当然，如果你真的想要那样，它会以同样的方式使用JS）：

＆＃13;

.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
    transition: opacity .5s linear;
    z-index: 1;
}
.section-item-portal:hover {
    opacity: 0;
}
.section-text {
	position: absolute;
	width: 217px;
	background-color: rgba(0,0,0,0.53);	
	color: #fff;
	padding: 10px;
    top: 8px;
    z-index: 0;
}

＆＃13;

<div class="section-item-portal">
   
</div> <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>

＆＃13;

容器版本（可选背景文字）：

＆＃13;

.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
    transition: opacity .5s linear;
    z-index: 1;
}
.container {
    display: inline-block;
}
.container:hover .section-item-portal {
    opacity: 0;
}
.container:hover .section-text {
    z-index: 2;
    opacity: 1;
}
.section-text {
    position: absolute;
    width: 217px;
    background-color: rgba(0, 0, 0, 0.53);
    color: #fff;
    padding: 10px;
    top: 8px;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s linear;
}

＆＃13;

<div class="container">
    <div class="section-item-portal"></div>
    <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet,</div>
</div>

＆＃13;

jQuery悬停效果不起作用

1 个答案: