javascript - 使用 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

This is my jquery code [...]. I don't quite understand it

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

当 document (作为 jQuery 对象 $ )是 ready , 调用 /* function body */ 描述的函数

$("div.sidenavOff")

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

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

当鼠标经过其中一个元素 ( mouseover ) 时，删除 class undefined (因为括号之间没有任何内容， removeClass )，然后添加类 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
    });
});

类(class)所在showme涉及到一些CSS强制显示元素

.showme {display: block;}