使用 JQuery 和 HTML 在悬停时显示/隐藏多个元素

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

这是我的 jquery 代码 [...]。不是很懂

$(document).ready(function () {/* function body */});

当document（作为一个jQuery对象$）是ready时，调用/* function body */所描述的函数

$("div.sidenavOff")

使用 jQuery $ 获取与 CSS 选择器 div.sidenavOff 匹配的所有 HTMLElements

.mouseover(function () {
    $(this).removeClass().addClass("sidenavOver");
})

当鼠标经过这些元素之一 (mouseover) 时，删除 class undefined（括号中没有任何内容，removeClass），然后添加 class sidenavOver (addClass) 指向鼠标所在的元素 (this)。这里的class可以理解为和HTML属性class的含义相同； <a class="xyz">

.mouseout(function () {
    $(this).removeClass().addClass("sidenavOff");
})

当鼠标离开这些元素之一 (mouseout) 时，类似于鼠标移过它们时，除了这次将 sidenavOff 类添加到该元素。

---

你很接近，但可能想要看起来像这样的代码

$(document).ready(function () {
    $("div.sidenavOff").mouseover(function () { // add visibility flag
        $("div.sidenavOver").addClass("showme"); // to div.sidenavOver
    }).mouseout(function () { // remove visibility flag
        $("div.sidenavOver").removeClass("showme"); // from div.sidenavOver
    });
});

showme 类与某些 CSS 相关，以强制显示元素

.showme {display: block;}

Answer 2

当鼠标悬停在容器上时，听起来您只是想显示或隐藏“sidenavOver”div。对吗？

我使用您的 html 创建了这个 jsfiddle，但注释掉了您丢失的所有图像并向您的容器 div 添加了一个类。 http://jsfiddle.net/joshvito/GaZQ6/

例如

//on hover over the container; you can use the a tag too, which ever element you want to bind the event to 
       $('.container').on({
        mouseenter: function () {
            $(".sidenavOff").hide(); //On mouseover, hode the first div
            $(".sidenavOver").show();
        },
        mouseleave: function () {
            $(".sidenavOff").show();
            $(".sidenavOver").hide();
        }
    });

关于 js 事件处理程序的良好参考位于 JQUERY API Documentation for .on