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

时间:2013-02-21 13:38:22

标签: jquery html css jsfiddle

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

请帮帮忙?

6 个答案:

答案 0 :(得分:1)

你错过了$(jQuery函数)你的()应该是:

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

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

答案 1 :(得分:1)

在jQuery选择器的开头需要$

改变这个:

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

对此:

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

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

使用此...

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

答案 4 :(得分:0)

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

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

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

答案 5 :(得分:0)

像这样使用你错过$ symbol

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

See Fiddle