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

我能够显示黑色背景。问题是当背景存在时，如果我再次将鼠标悬停在浏览器上，则背景消失并再次出现。

我不想要那个。当我将鼠标悬停在背景之外时，我只希望背景消失（一旦显示）。

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 // 将鼠标悬停在顶部栏上的浏览上......我想要相同的行为

4

2 回答 2

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/

于 2013-08-21T18:05:15.487 回答
1

使用该stop()功能。

$(".item2").hover(
    function() {
      $(".item1").stop().fadeIn();
    },
    function() {
    }
);
$(".item1").hover(
    function() {
    },
    function() {
        $(".item1").stop().fadeOut();
    }
);
于 2013-08-21T18:17:43.897 回答