使用jquery在悬停时显示两个不同的div

时间:2017-10-17 09:16:49

标签: javascript jquery html css

我会保持简短。我希望黑色div在mouseout红色div时消失,而红色div现在不再那样了。现在的问题是,我也希望黑色div在鼠标悬停时仍然显示。 JsFiddle

5 个答案:

答案 0 :(得分:2)

你可以像对待自己一样使用mouseout 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);
});

答案 1 :(得分:1)

只需使用它,黑色div将在悬停时出现并在mouseout上消失:

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

答案 2 :(得分:0)

您可以使用mouseout以下代码。



$('.red').hover(function() {
	$('.black').show(200);
}, function() {
	
  $('.black').hover(function() {
  	$('.red').trigger('hover');
    $('.black').show(200);
  }, function() {
  	$('.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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

这就像css问题我快速修复 你可以尝试

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

&#13;
&#13;
$( ".red" ).hover(
  function() {
    	$('.black').show(200);
  }, function() {
    $('.black').hide(200);
  }
);
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

您只需使用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