使用jQuery在另一個div上顯示div

我有一個產品頁面，該頁面已填充我的Locayta。它用包含圖像的div填充。我們稱這個div爲「a」。產品的數量是x，因此x的數量是「a」，全部使用相同的ID。使用jQuery在另一個div上顯示div

使用jQuery時，我想讓一個div「b」出現在任何div「a」懸停的頂部，然後讓div「b」在懸停停止時離開。爲了澄清，由於有很多div「a」，我需要定位「this」div a，它將鼠標懸停在它上面，並且移動一個現有的div「b」這個「a」或者在這個「a」的頂部創建一個div「b」。

到目前爲止，我已經嘗試過。之後，.insertAfter和.prop但不確定這是最適合這種情況

一種方法我也考慮過，但會幫助孃家的代碼，就是要有這樣既申報單：

<div id="a"><img src="img.jpg"></div> 

<div id="b" style="display:none;"><img src="img2.jpg"></div> 

Then when the user hovers over div "a", div "b" should sit on top of div "a" and display:none should be removed. Thoughts?

我有這個問題以前打開我的真實代碼，但它只是困惑的事情。

任何意見非常感謝！

編輯：

議決使用下述溶液：

jQuery('#main_cat_prods').delegate('img', 'mouseenter', function(){ 
      var $skuID = this.src.match(/[a-z][a-z][a-z]\d\d\d\d\d/)[0]; 

     if (!jQuery('#QuickBuyProdBox').length) { 
      jQuery(this).closest('.image').prepend('<div id="QuickBuyProdBox" style="width:50px; height:50px; position:absolute; background-color:red; cursor:pointer;">'); 
     }; 
      jQuery("#QuickBuyProdBox").click(function(){ 
       jQuery.event.trigger('lightbox', $skuID); 
      }); 
      jQuery('.image, #QuickBuyProdBox').mouseleave(function(){ 
      jQuery('#QuickBuyProdBox').remove(); 
     }); 
    });

來源

2014-02-06 Myles

假設a和b是類，而不是和ID（如ID應該在頁面上唯一的）：

$('.a').hover(function() { 
    var buttonCopy = $('.b').clone(); 
    $(this).find('img').after(buttonCopy); 
    buttonCopy.show(); 
}, 
function() { 
    $(this).find('.b').remove(); 
});

Working Fiddle

你應該能夠改變這個工作形式，如果你必須絕對必須使用ID（例如把他徘徊在#parentContainer > div），但它會很hacky，我建議反對它。 Here's an example of how to handle it.

$('#wrapper > div').hover(function() { 
    var buttonCopy = $('#b').clone(); 
    $(this).find('img').after(buttonCopy); 
    buttonCopy.show(); 
}, 
function() { 
    $(this).find('#b').remove(); 
});

如果CMS被吐出相同的ID到頁面上，我建議更改模板。

來源

2014-02-06 10:22:56 MassivePenguin

很好的答案 - 謝謝。你有可能使用ID修改你的小提琴嗎？非常感謝的人！ :) – Myles

更新爲ID版本 - 但多個相同的ID可能會導致在某些瀏覽器中出現問題，因此您的真實世界裏程可能會有所不同。 – MassivePenguin

-1

如果你把裏面的一個div B，則可以CSS你的出路一些它：

.a- class：hover .b-class {display：block}

來源

2014-02-06 10:12:34 nsordk

我無法訪問HTML，它是在外部生成的。因此我需要使用jQuery。另外，正如我在問題中所規定的，有多個具有相同ID的div，使用CSS會將此規則應用於所有這些規則。 – Myles

演示：JS Fiddle

試試下面的代碼示例：

CSS：

<style type="text/css"> 
    .container { 
     background-color: #bababa; 
     width: 200px; 
     height: 30px; 
    } 

    .tooltip { 
     position: absolute; 
     background-color: #333; 
     border: 1px solid orange; 
     width: 50px; 
     height: 30px; 
    } 
</style>

HTML：

<div id="a" class="container"> 
    <img src="img.jpg"> 
</div><br/><br/> 
<div id="a" class="container"> 
    <img src="img.jpg"> 
</div><br/><br/> 
<div id="a" class="container"> 
    <img src="img.jpg"> 
</div><br/><br/> 
<div id="a" class="container"> 
    <img src="img.jpg"> 
</div> 
<div id="b" style="display: none;" class="tooltip"> 
    <img src="img2.jpg"> 
</div>

JAVASCRIPT：

<script type="text/javascript" language="javascript"> 
    $('.container').hover(function (evt) { 
     $("#b").show(); 
     $("#b").css({ 
      top: evt.pageY, 
      left: evt.pageX 
     }); 
    }); 

    $('.container').mouseout(function() 
    { 
     $("#b").hide(); 
    }); 
</script>

來源

2014-02-06 10:19:35 SpiderCode

偉大的答案蜘蛛！但是，這個問題的一個問題是div「b」出現在所有地方並閃爍！有沒有什麼辦法可以像settimeout那樣防止這種情況，並且將它的位置絕對置於「a」之內？所以它只出現在「a」的同一個地方？再次感謝！ :) – Myles

你問閃爍？這是發生兩次或三次show-hide-show-hide-show那樣？ – SpiderCode

解決了閃爍的問題。檢查更新後的代碼和演示。謝謝 – SpiderCode

看到這個小提琴：http://jsfiddle.net/JfEPA/

$('.product').hover(function(){ 

    $('#target').css({top:$(this).offset().top, left: $(this).offset().left}); 
})

你正在使用id S爲div的指定。你不應該使用相同的ID，而是使用相同的類。

來源

2014-02-06 10:22:11 jacquard

你可以這樣做：

$('.a-class').on('mouseenter', function() { 
$('.b-class').show(); 
});

來源

2014-02-06 10:22:35 nsordk

使用jQuery在另一個div上顯示div

回答

相關問題