Question

这是我到目前为止所做的：

<div style="position: relative;"> <a href="#games">
    <div class="sidenavOff">
    <img src = "images/card_normal.png" />
    <img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
    <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
    </div>
    <div class = "sidenavOver">
    <img src = "images/hover/card_hover.png" />
    <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
    <img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
    Show a bunch of text here
    <img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
    </div>
    </a>
</div>

所以card.png是一张记录卡，上面覆盖着多个透明图像。当鼠标离开卡片时，卡片上会显示icon_games.png和title_games.png。我想要它，以便当鼠标悬停在card.png，icon_games.png或title_games.png上时（换句话说，只要鼠标指针在卡中），该卡就会显示元素title_games.png，card_hover_separator.png，文本描述和button_start_normal.png，按顺序垂直排列（并且它的定位应该是可编辑的，因为它可能与不悬停时显示的图像不同）。

这是我的jquery代码（之前我从未使用过它，所以我很确定它已关闭了。我不太明白它）：

$(document).ready(function () {
    $(“div.sidenavOff”).mouseover(function () {
        $(this).removeClass().addClass(“sidenavOver”);
    }).mouseout(function () {
        $(this).removeClass().addClass(“sidenavOff”);
    });
});

以更易理解的格式，不使用悬停：

http://img834.imageshack.us/img834/7026/screenshot20130606at122.png

悬停：

http://imageshack.us/photo/my-images/855/screenshot20130606at122.png/

Answer 1

正如我所说，你不需要JavaScript：

http://jsfiddle.net/arEQy/

.sidenavOver {display:none}
a:hover .sidenavOff {display:none}
a:hover .sidenavOver {display:block}

您应该为父元素添加一些类名。

Answer 2

如果我理解正确，您希望在鼠标悬停在“关闭”变体上时显示不同的内容。当您离开“Over”变体时，您想要显示原始变体。这可以通过这个jQuery实现：

$(document).ready(function () {
    $("div.sidenavOff").mouseover(function () {
        $(this).siblings(".sidenavOver").show();
        $(this).hide();
    })

    $("div.sidenavOver").mouseout(function () {
        $(this).siblings(".sidenavOff").show();
        $(this).hide();
    });
});

Answer 3

<div class="parent" style="position: relative;"> 
    <a href="#games">
        <div class="sidenavOff">
            <img src = "images/card_normal.png" />
            <img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
            <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
        </div>
        <div class = "sidenavOver">
            <img src = "images/hover/card_hover.png" />
            <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
            <img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
                 Show a bunch of text here
            <img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
        </div>
    </a>
</div>

CSS

.parent .sidenavOver {display:none;}

.parent:hover .sidenavOver {display:block;}
.parent:hover .sidenavOff  {display:none;}

这不需要javascript吗？

Answer 4

理论上你可以使用CSS和hover伪类来实现目的：

.sidenavOver:hover {
    display:none
}

但是，当您移动光标时，这会产生闪烁的不幸副作用，因为：当隐藏或不显示元素时，悬停不起作用。

最好的选择是Michael_B的答案，它利用了jQuery的漂亮辅助函数.show()和.hide()

悬停时使用JQUERY / HTML显示/隐藏多个元素

4 个答案: