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 Selector div.sidenavOff匹配的所有 HTMLElements

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

当鼠标移过其中一个元素（mouseover）时，删除类 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/

e.g。

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

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

2 个答案: