显示/隐藏多个元素悬停与JQuery和HTML

Show/hide multiple elements on hover with JQuery and HTML

本文关键字：JQuery HTML 悬停 元素 隐藏 显示      更新时间：2023-09-26

这是我目前所看到的:

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

这是我的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)上时，删除类 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
    });
});

其中showme类与一些CSS相关，以强制元素显示

.showme {display: block;}

这听起来就像你只是试图显示或隐藏"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();
        }
    });
JQUERY API Documentation中.on
是js事件处理程序的良好参考。
相关文章：