2

这是我到目前为止所拥有的：

<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/

4

4 回答 4

2

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

http://jsfiddle.net/arEQy/

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

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

于 2013-06-06T21:28:51.903 回答
0

如果我对您的理解正确，那么当您将鼠标悬停在“关闭”变体上时，您想显示不同的内容。当您离开“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();
    });
});
于 2013-06-06T21:23:14.967 回答
0 
<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吗？

于 2013-06-06T21:27:33.533 回答
0

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

.sidenavOver:hover {
    display:none
}

但是，当您移动光标时，这会产生令人遗憾的副作用，因为 :hover 在隐藏或不显示元素时不起作用。

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

于 2013-06-06T21:42:45.327 回答