सूची आइटम के बगल में div को संरेखित करना

Question

मैं div तत्व बनाने और गतिशील रूप से उन पर प्रिंट आइटम बनाने की कोशिश कर रहा हूं। मैंने यह दिखाने के लिए a demo बनाया है कि मैं कहां पहुंचा हूं।

मेरे कोड के साथ समस्या यह है कि यह उस सूची के बगल में दिखाई नहीं दे रहा है जहां मैं इसे चाहता हूं। इसके बजाय यह नीचे प्रदर्शित होता है। क्या मैं उस तत्व के बगल में नया div दिखा सकता हूं जिसे मैं आगे बढ़ा रहा हूं?

$(".bubble").live({ 
    mouseenter : function() { 
     $("#bubble").show(); 
     $("#bubble").html($(this).attr('id')); 
    }, 
    mouseleave : function() { 
     $("#bubble").empty(); 
    } 
}); 

#bubble{ 
    width:100px; 
    height:20px; 
    background-color:#666666; 
    position:absolute; 
    display:hidden; 
} 

<ul> 
    <li><span class="bubble" id="test1">test1</span></li> 
    <li><span class="bubble" id="test2">test2</span></li> 
    <li><span class="bubble" id="test3">test3</span></li> 
    <li><span class="bubble" id="test4">test4</span></li> 
    <li><span class="bubble" id="test5">test5</span></li> 
</ul> 
<div id="bubble"></div> 

Answer 1

आप li जो पर moused की जा रही है के लिए #bubble रिश्तेदार की स्थिति को निर्धारित करने की आवश्यकता । इस प्रयास करें:

$("ul").on('hover', '.bubble', function(e) { 
    if (e.type == 'mouseenter') { 
     var $el = $(this); 
     $("#bubble") 
      .html($el.attr('id')) 
      .css({ 
       top: $el.offset().top, 
       left: $el.offset().left + $el.width() 
      }) 
      .show(); 
    } 
    else { 
     $("#bubble").empty(); 
    } 
}); 

Example fiddle

ध्यान दें कि मैं live() के रूप में यह पदावनत किया गया है के उपयोग को हटा दिया है, और बदले में एक प्रतिनिधि के साथ on() इस्तेमाल किया। इसके अलावा मैंने hover ईवेंट का उपयोग किया।

Answer 2

आप <ul> और <div> निम्नलिखित शैलियों यह काम करना चाहिए देते हैं।

display: inline; 
float: left; 

Answer 3

आशा इस मदद करता है:

JS-Fiddle Demo

मैं ली

$(".bubble").live({ 
      mouseenter : function() { 
       $("#bubble").html($(this).attr('id')); 
       $(this).append($("#bubble").show());    
      }, 
      mouseleave : function() { 
      $("#bubble").empty().hide(); 

      } 
    }); 

Answer 4

क्या मीका ने कहा करो और भी स्थिति को दूर करने के #bubble संलग्न: पूर्ण;

तो सीएसएस

#bubble{ 
width:100px; 
height:10px; 
background-color:#666666; 
display:hidden; 
display: inline; 
float: left; 
} 

ul{ 
display: inline; 
float: left; 
} 

http://jsfiddle.net/y44dR/21/

Answer 5

क्या एक शुद्ध सीएसएस समाधान के बारे में होना चाहिए?

HTML:

<ul> 
<li> 
    <span class="bubble" id="test1">test1</span> 
    <div>test1</div> 
</li> 
<li> 
    <span class="bubble" id="test2">test2</span> 
    <div>test2</div> 
</li> 
<li> 
    <span class="bubble" id="test3">test3</span> 
    <div>test3</div> 
</li> 
<li> 
    <span class="bubble" id="test4">test4</span> 
    <div>test4</div> 
</li> 
<li> 
    <span class="bubble" id="test5">test5</span> 
    <div>test5</div> 
</li> 
</ul> 

सीएसएस:

ul li div { 
    width: 100px; 
    height: 10px; 
    background-color: #666666; 
    position: absolute; 
    display: none; 
} 

ul li:hover div { 
    display: inline; 
} 

JSFiddle: http://jsfiddle.net/H2ZMc/

Answer 6

इस प्रयास करें:

var bubble = $("#bubble"); 

$(".bubble").live({ 
    mouseenter : function(e) {  
     $("#bubble").html($(this).attr('id')); 
     e.target.appendChild(bubble); 
    }, 

    mouseleave : function() { 
     $("#bubble").empty();   
    } 
}); 

क्या करता है तत्व है जिस पर माउस खत्म हो गया है करने के लिए बुलबुला तत्व जोड़ देता है। display: inline को div पर लागू करके आप इसे नीचे के बजाय अपने भाई के बगल में दिखाई दे सकते हैं क्योंकि यदि आप सीधे इस कोड का उपयोग करते हैं तो यह होगा।

Answer 7

$(".bubble").live({ 
    mouseenter: function() { 
     $("#bubble").show(); 
     $("#bubble").html($(this).attr('id')); 

     var p = $(this).position(); 
     $("#bubble").css({left: p.left + $(this).outerWidth(), top: p.top }); 
    }, 
    mouseleave: function() { 
     $("#bubble").empty().css({top: '', left: ''}); 
    } 
});​ 

Answer 8

क्यों .on() का उपयोग करते हैं #bubble तत्व पहले से मौजूद है।

$(".bubble").hover(function() { 

    var offset = $(this).offset(); 

    $("#bubble").html($(this).attr("id")) 
     .css({ top: offset.top, left: offset.left + $(this).width() }) 
     .show(); 
}, function() { 
    $("#bubble").html("").hide(); 
}); 

फिडल here