無法正確創建jsfiddle以重疊懸停divs

-5

我一直無法爲我的實際問題創建jsfiddle。無法正確創建jsfiddle以重疊懸停divs

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; 
}

我想顯示ITEM2的物品1懸停

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

但在懸停它不會顯示ITEM2。它應該對嗎？

請幫忙？

來源

2013-02-21 gaurav jain

標題應該告訴問題是什麼，而不是你的jsfiddle經驗。 – 2013-02-21 13:39:59

謝謝大家！ – 2013-02-21 13:43:03

您在您的jQuery選擇的開始需要$。

更改此：

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

要這樣：

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

現場演示：http://jsfiddle.net/z9Unk/25/

來源

2013-02-21 13:40:34 Curt

你已經錯過了$（jQuery的功能）在你的（）應該是：

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

不

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

來源

2013-02-21 13:40:28 voigtan

使用此...

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

來源

2013-02-21 13:41:33

你的jQuery不正確。 jQuery在選擇器之前需要$，如果mouseleave不需要任何東西，則需要.mouseover而不是.hover。我還通過冷凝線路並將.css更改爲.show()來清理您的代碼。

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

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

來源

2013-02-21 13:41:51 Mooseman

使用這樣你錯過了$符號

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

See Fiddle

來源

2013-02-21 13:42:00 Dineshkani

我想你也需要爲ITEM1失去懸停隱藏它

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

而且我在場外我把你的代碼改成更改爲css屬性顯示到顯示和隱藏。達到相同的效果

來源

2013-02-21 15:06:47

無法正確創建jsfiddle以重疊懸停divs

回答

相關問題