//if ($('.vie_writ_que-user_oth').style == display: 'none') {
$('p').on('mouseover', function() {
$(this).closest('.content').find('.textbox').fadeIn(1000)
});
$('.textbox').on('mouseleave', function() {
$(this).fadeOut(1000)
});
//}.textbox {
width: 150px;
height: 200px;
border: 1px solid #000;
overflow: auto;
float: left;
display: none;
margin-top: 60px;
}
.content {
float: left position: relative;
}
p.a {
position: absolute;
left: 30px;
}
p.b {
position: absolute;
left: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div class="content">
<p class="a">hover it</p>
<div class="textbox paragraphs" data-lorem="3"></div>
</div>
<div class="content">
<p class="b">Next hover</p>
<div class="textbox paragraphs" data-lorem="3"></div>
</div>
您好， 现在，当您将鼠标悬停在第一个文本框上时，文本将显示，当您将鼠标悬停在第二个文本上时，以及当您从文本框和文本框fadeOut进行鼠标移动时，它将显示相同内容。
我的问题：如果鼠标悬停在'悬停它'文本框上会显示如何，但是当我鼠标悬停在'下一个悬停'上一个文本框fadeOut和当前文本框显示时。只有一个文本框可以显示
答案 0 :(得分：1)
首先，您可能不希望混合mouseover / mouseout和mouseenter / mouseleave事件。它们是截然不同的（有关进一步说明，请参阅此answer）。在你的情况下，他们不会有很大的不同，但遵循惯例总是更好。
如果您希望所有文本框都消失，您需要做的就是在<p>上听取鼠标悬停事件，并强制其父母兄弟的文本框消失，即：
$('p').on('mouseover', function() {
// Show own textbox
$(this).closest('.content').find('.textbox').stop(true, true).fadeIn(1000);
// Hide textbox of parents' siblings
$(this).closest('.content').siblings('.content').find('.textbox').stop(true, true).fadeOut(1000);
});
为了更有效的代码，您可以存储$(this).closest('.content')对象，即：
$('p').on('mouseover', function() {
// Store parent
var $parent = $(this).closest('.content');
// Show own textbox
$parent.find('.textbox').stop(true, true).fadeIn(1000);
// Hide textbox of parents' siblings
$parent.siblings('.content').find('.textbox').stop(true, true).fadeOut(1000);
});
你可能会注意到我在任何jQuery动画之前都有included the .stop(true, true) method。原因是，如果你没有停止和动画，它将排队并“聚集”，导致一系列延迟的动画显然不会与用户动作同步。
请参阅下面的概念验证示例：
//if ($('.vie_writ_que-user_oth').style == display: 'none') {
$('p').on('mouseover', function() {
$(this).closest('.content').find('.textbox').stop(true, true).fadeIn(1000);
$(this).closest('.content').siblings().find('.textbox').stop(true, true).fadeOut(1000);
});
$('.textbox').on('mouseleave', function() {
$(this).stop(true, true).fadeOut(1000);
});
//}.textbox {
width: 150px;
height: 200px;
border: 1px solid #000;
overflow: auto;
float: left;
display: none;
margin-top: 60px;
}
.content {
float: left position: relative;
}
p.a {
position: absolute;
left: 30px;
}
p.b {
position: absolute;
left: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<p class="a">hover it</p>
<div class="textbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="content">
<p class="b">Next hover</p>
<div class="textbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
答案 1 :(得分：1)
这很简单。摆脱float，改为使用inline-block。
您的课程a和b应具有相同的样式，因此只需使用通用课程即可。我选择了名称col。
将内容定位为absolute。
注意： 我借用了Terry的淡入逻辑并将其转换为jQuery插件。
(function($) {
$.fn.onHoverShowOnly = function(options) {
var defaults = {
contentSelector : '',
targetSelector : '',
fadeDuration : 1000
}
options = $.extend(true, defaults, options || {});
this.on('mouseover', function() {
var $parent = $(this).closest(options.contentSelector);
$parent.find(options.targetSelector)
.stop(true, true)
.fadeIn(options.fadeDuration);
$parent.siblings(options.contentSelector)
.find(options.targetSelector)
.stop(true, true)
.fadeOut(options.fadeDuration);
});
$(options.targetSelector).on('mouseleave', function() {
$(this).fadeOut(options.fadeDuration);
});
}
})(jQuery);
$('p.col').onHoverShowOnly({
contentSelector : '.content',
targetSelector : '.textbox'
});div.content {
display: inline-block;
position: relative;
width: 48%;
}
p.col {
position: absolute;
top: 0;
left: 0;
}
div.textbox {
display: none;
position: absolute;
top: 2em;
width: 150px;
height: 200px;
margin-top: 1em;
border: 1px solid #000;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div class="content">
<p class="col">Hover it</p>
<div class="textbox paragraphs" data-lorem="3"></div>
</div>
<div class="content">
<p class="col">Next hover</p>
<div class="textbox paragraphs" data-lorem="3"></div>
</div>
答案 2 :(得分：0)
你可以用更少的jQuery代码做同样的事情：
$(document).on('mouseenter mouseleave','p', function () {
$(this).siblings('.textbox').fadeToggle(1000) ;
}).textbox
{
width:150px;
height:200px;
border:1px solid #000;
overflow:auto;
float:left;
display:none;
margin-top:60px;
position:absolute;
}
.content
{
float:left;
position:relative;
width: 50%;
display:block;
height: 300px;
}
p.a
{
position:absolute;
left:30px;
}
p.b
{
position:absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<p class="a"> hover it</p>
<div class="textbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="content">
<p class="b"> Next hover</p>
<div class="textbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>