Question

我有一个内部div的div喜欢隐藏。当我将鼠标悬停在外面的div上时，我希望展示内心。我这样做有困难。我尝试了一些变化，但仍然无法得到它。

我也会在页面上有多个外部div。

<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>
<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>
<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>

脚本：

        $("div.listingContainer").mouseover(function() {
            $(this).parent().siblings(".saveCompare").show();
        }).mouseout(function(){

        });

感谢您的帮助。

Answer 1

你为什么要使用jQuery？我会用css悬停这个

.outdiv:hover .innerdiv {
  display: block; // adjust for your method of hiding the div
}

Answer 2

您应该执行类似

的操作

    $("div.outerDiv").mouseover(function() {
        $('div.innerDiv', this).show();
    });

或显示/隐藏

    $("div.outerDiv").hover(function() {
        $('div.innerDiv', this).show();
    },
    function() {
        $('div.innerDiv', this).hide();
    });

Answer 3

试试这个：

$("div.outdiv").hover(function()
{
    $(this).find(".innerdiv").show();
},
function()
{
    $(this).find(".innerdiv").hide();
});

Answer 4

您可以为$()指定第二个参数，指定选择的上下文 - jQuery API。

$('.outdiv').hover(function ()
{
    $('.innerdiv', this).show();
}, function ()
{
    $('.innerdiv', this).hide();
});

http://jsfiddle.net/pGF3x/

Answer 5

试试这个

$(".outdiv").hover(function()
{
        $(this).find(".innerdiv").show();
},
function()
{
         $(this).find(".innerdiv").hide();
});

Answer 6

<script>
        $(document).ready(function () {
            $('.outdiv',this).hover(function () {
                $('.innerdiv',this).css('opacity', '0');
            }, function () {
                $('.innerdiv').css('opacity', '1.0');
            });
        });
</script>

使用JQuery

这样做

jQuery在悬停时显示内部div

6 个答案: