Question

我有一个顶栏
我在顶栏上浏览
当我在浏览时悬停时，我显示黑色背景
当我将鼠标悬停在黑色背景之外时，我想隐藏黑色背景

我可以显示黑色背景。问题是当背景存在时，如果我再次悬停在浏览上，则背景消失并再次出现。

我不想那样。我只希望背景消失（一旦显示）我将鼠标悬停在外面。

http://jsfiddle.net/z9Unk/226/

问题

将鼠标悬停在ITEM2上
然后将鼠标悬停在ITEM2上，但留在黑匣子中
再次悬停在ITEM2上//这里黑框消失并重新出现。

我想要什么

将鼠标悬停在ITEM2上
然后将鼠标悬停在ITEM2上，但留在黑匣子中
再次悬停在ITEM2上//这里黑盒子停留......没有任何变化
将鼠标悬停在黑匣子外面
黑匣子消失了。

请帮忙。

HTML

<div class="item1">
  item1
</div>
<div class="item2">
    item2
</div>

CSS

.item1 {
  position:fixed;
  width:50%;
  height:320px;
  z-index:-1;
  top:0;
  background-color:black;
  opacity:0.85;
  display:none;
}

.item2 {
   position:fixed;
  top:32px;
  left:150px;
  color: red;
  font-size: 14px;
  font-weight:bold;
  text-transform:uppercase;
  z-index:1;

}

的jQuery

$(".item2").hover(
    function() {
      $(".item1").fadeIn();
    },
    function() {
    }
);
$(".item1").hover(
    function() {
    },
    function() {
        $(".item1").fadeOut();
    }
);

www.vevo.com //将鼠标悬停在顶栏上浏览....我想要同样的行为

Answer 1

好吧，因为你把两个div放在一起，试着给'Item2'一些，然后再试一次：

.item2 {
     position:fixed;
     top:32px;
     left:200px;
     color: red;
     font-size: 14px;
     font-weight:bold;
     text-transform:uppercase;
     z-index:1;}

http://jsfiddle.net/z9Unk/227/

Answer 2

使用stop()功能。

$(".item2").hover(
    function() {
      $(".item1").stop().fadeIn();
    },
    function() {
    }
);
$(".item1").hover(
    function() {
    },
    function() {
        $(".item1").stop().fadeOut();
    }
);

悬停时显示重叠/堆叠背景

2 个答案: