Question

我有一个产品页面，填充了我的Locayta。它填充了包含图像的div。让我们称这个div为＆＃34; a＆＃34;。有x个数量的产品，因此有x个数量的div＆＃34; a＆＃34;＆s;都具有相同的ID。

使用jQuery，我想要一个div＆＃34; b＆＃34;出现在任何一个div＆＃34; a＆＃34;徘徊，然后为div＆＃34; b＆＃34;当悬停停止时离开。

澄清一下，由于有很多div＆＃34; a＆＃34;，我需要瞄准＆＃34;这个＆＃34; div a，将鼠标悬停在它上面的那个，并移动现有的div＆＃34; b＆＃34;除此之外＆＃34; a＆＃34;或创建一个div＆＃34; b＆＃34;除此之外＆＃34; a＆＃34;。

到目前为止，我已经尝试过.after，.insertAfter和.prop但不确定哪种情况最适合这种情况

我考虑过的一种方法，但是对代码有帮助，就是让这两个div都是这样的：

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

Answer 1

演示： 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>

Answer 2

看到这个小提琴：http://jsfiddle.net/JfEPA/

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

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

您已指定使用id s作为div。您不应该使用相同的ID，而是使用相同的类。

Answer 3

假设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而且我' d建议不要这样做。 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，我建议您更改模板。

Answer 4

你可以这样做：

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

Answer 5

如果你将div b放入a中，那么你可以通过以下方式解决问题：

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

使用jQuery在另一个div上显示div

5 个答案: