-5

我无法为我的实际问题创建 jsfiddle。

HTML

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

CSS

item1 {
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    top:5%;
}

.item2 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:blue;
    top:8%;
    left:1%;
    display:none;
}

我正在尝试在 item1 悬停时显示 item2

http://jsfiddle.net/z9Unk/23/

但是在悬停时它不显示 item2。应该对吧？？

请帮忙？

4

6 回答 6

1

您在 () 周围错过$的 (jQuery 函数) 应该是：

$(".item1").hover(
    function() {
      $(".item2").css("display", "block");
    }
);

不是

(".item1").hover(
    function() {
      (".item2").css("display", "block");
    }
);
于 2013-02-21T13:40:28.727 回答
1

您需要$在 jQuery 选择器的开头。

改变这个：

(".item1").hover(
    function() {
      (".item2").css("display", "block");
    }
);

对此：

$(".item1").hover(
    function() {
      $(".item2").css("display", "block");
    }
);

现场演示：http: //jsfiddle.net/z9Unk/25/

于 2013-02-21T13:40:34.360 回答
1

我认为您还需要隐藏它，因为 item1 失去悬停

$(".item1").hover(
    function() {
      $(".item2").show();
    },function(){
    $(".item2").hide()
    }
);

当然，我更改了您对显示的 css 属性进行更改以显示和隐藏的代码。达到同样的效果

于 2013-02-21T15:06:47.160 回答
0

用这个...

$(".item1").on('hover', function() {
      $(".item2").css("display", "block");
    }
);
于 2013-02-21T13:41:33.530 回答
0

你的 jQuery 不正确。jQuery 需要一个$before 选择器，而.mouseover不是.hover如果你不需要任何mouseleave. 我还通过压缩行并更改.css为.show().

$(".item1").mouseover(function() {
    $(".item2").show();
});

小提琴：http: //jsfiddle.net/z9Unk/30/

于 2013-02-21T13:41:51.127 回答
0

像这样使用你会错过 $ 符号

$(".item1").hover(
function() {
  $(".item2").css("display", "block");
}
);

见小提琴

于 2013-02-21T13:42:00.947 回答