Question

我无法为我的实际问题创建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。它应该没错？

请帮帮忙？

Answer 1

你错过了$（jQuery函数）你的（）应该是：

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

不

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

Answer 2

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

改变这个：

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

对此：

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

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

Answer 3

我认为你还需要隐藏它，因为item1丢失了悬停

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

然后我将你的更改为显示属性的代码更改为显示和隐藏。达到相同的效果

Answer 4

使用此...

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

Answer 5

您的jQuery不正确。 jQuery在选择器之前需要$，如果.mouseover不需要任何内容，则需要.hover而不是mouseleave。我还通过缩小行并将.css更改为.show()来清理代码。

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

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

Answer 6

像这样使用你错过$ symbol

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

See Fiddle

无法正确创建jsfiddle以在悬停时重叠div

6 个答案: