在jquery上悬停显示两个不同的div

Question

我只是保持简短。我想要一个黑色的div当mouseout红色的div现在不那样。现在的问题是，我也希望鼠标在它上面时仍然显示黑色的div。 JsFiddle

Answer 1

像你说的你自己喜欢这个 https://jsfiddle.net/xknc5x4h/

$('.red').mouseout(function() { 
    $('.black').hide(200); 
}) 

更新，可以使用鼠标移出：改变的代码添加到您的偏好：https://jsfiddle.net/2L5s7ude/

$('.red').hover(function() { 
$('.black').show(200); 
}, function() { 
     if(!$('.black').is(":hover")) { 
     $('.black').hide(200); 
    } 
}); 

$('.black').mouseout(function (e) { 
    $(this).hide(200); 
}); 

Answer 2

只需使用这一点，而黑色的div将出现在鼠标悬停处并消失：

$('.red').hover(function() { 
    $('.black').show(200); 
}, function() { 
    $('.black').hide(200); 
}); 

Answer 3

您可以使用鼠标以下是代码。

$('.red').hover(function() { 
 
\t $('.black').show(200); 
 
}, function() { 
 
\t 
 
    $('.black').hover(function() { 
 
    \t $('.red').trigger('hover'); 
 
    $('.black').show(200); 
 
    }, function() { 
 
    \t $('.red').off('hover'); 
 
    $('.black').hide(200); 
 
    }); 
 
    
 
});

.red, 
 
.black, 
 
.green { 
 
    height: 4rem; 
 
    width:10rem; 
 
    line-height: 4rem; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.black { 
 
    display: none; 
 
    background: #333; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<div class="red"> 
 
    Hover me 
 
</div> 
 

 
<div class="black"> 
 
    Its me 
 
</div> 
 
<div class="green"> 
 
    Green 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 4

这就像CSS问题，我做速战速决 你可以尝试

https://jsfiddle.net/qc1rvsp0/4/

$(".red").hover(
 
    function() { 
 
    \t $('.black').show(200); 
 
    }, function() { 
 
    $('.black').hide(200); 
 
    } 
 
);

.wrapper { 
 
    width:10rem; 
 
} 
 

 
.red, 
 
.black, 
 
.green { 
 
    height: 4rem; 
 
    line-height: 4rem; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.black { 
 
    display: none; 
 
    background: #333; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="red"> 
 
    Hover me 
 
</div> 
 

 
<div class="black"> 
 
    Its me 
 
</div> 
 
<div class="green"> 
 
    Green 
 
</div> 
 
</div> 
 

 

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 5

你可以用CSS完成它，使用hover伪类和+选择器。使用你的HTML结构：

<div class="red">Hover me</div> 
<div class="black">Its me</div> 
<div class="green">Green</div> 

您可以使用下一个样式隐藏/显示红色/黑色悬停黑：

.red:hover + .black { 
    display: block; 
} 
.black:hover { 
    display: block; 
} 

我修改你的jsfiddle测试here。有了这个选项，你可以避免导入jQuery，并让你的网页更轻。使用CSS你也可以添加一些效果，例如结合max-height和opacity，如果你需要它