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

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/