0

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

<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

2 回答 2

0

这是我的 jquery 代码 [...]。我不太明白

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

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

$("div.sidenavOff")

使用 jQuery$获取与 CSS Selector 匹配的所有HTMLElementdiv.sidenavOff

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

当鼠标经过这些元素之一 ( mouseover) 时，删除该类 undefined（括号之间没有任何内容，removeClass），然后将类 sidenavOver( addClass) 添加到鼠标所在的元素 ( this)。这里的class可以理解为和HTML属性类的意思一样；<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;}
于 2013-06-06T19:32:41.037 回答
0

当鼠标悬停在容器上时，听起来您只是想显示或隐藏“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 事件处理程序的良好参考位于 .on 的JQUERY API 文档中

于 2013-06-06T20:14:45.767 回答