0

好的，我想弄清楚如何使用 jQuery 来计算div当前选择的内容、突出显示等，然后将代码应用于该div.

例如，我将三个divs 排成一排。每个div都有一个class。.box每个内部都有div另一个div具有.overlay. 默认情况下.overlay设置为display: none;，但是当我将鼠标滚动到每个div我想要覆盖的地方时，div仅设置为可见 - 所有其他div的覆盖应该保持隐藏。

看看，http://jsfiddle.net/j76s2/

我有 JS 让覆盖显示鼠标滚过divs 时，但它会显示所有覆盖，只要你将鼠标滚过任何div. 我知道为什么会发生这种情况，但我无法解决的是如何让代码运行起来，当鼠标悬停在它上面div时，它应该只显示第一个覆盖div，依此类推。

4

3 回答 3

1

您只需要使用以下内容引用特定元素this：

$(".box").mouseover(function(){
    $(".overlay", this).css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(".overlay", this).css({"display" : "none"});
});

这样，您将选择范围缩小到.box包含在悬停元素内的元素。

另外，考虑使用.hide()and.show()而不是.css().

于 2012-09-22T23:57:53.777 回答
1

您可以使用.hover()具有两个功能的事件，一个用于悬停，一个用于悬停。然后，您可以将this其用作当前悬停.box元素的上下文以在其中找到.overlay它，然后使用.hide()并.show()更改它的可见性。

$(".box").hover(
    function(){$(this).find(".overlay").show()},
    function(){$(this).find(".overlay").hide()}
);

工作演示：http: //jsfiddle.net/jfriend00/wa5Bn/

您可能还喜欢使用fadeIn()并fadeOut()喜欢这样：

$(".box").hover(
    function(){$(this).find(".overlay").stop(true, true).fadeIn(500)},
    function(){$(this).find(".overlay").stop(true, true).fadeOut(500)}
);​

工作演示：http: //jsfiddle.net/jfriend00/4qeqm/

于 2012-09-23T00:08:23.707 回答
0

.overlay您正在更改具有该类的所有元素的 CSS 。要仅影响您当前鼠标悬停的那个，您应该使用$(this)选择当前元素，然后find()定位其中包含的类。

$(".box").mouseover(function(){
    $(this).find(".overlay").css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(this).find(".overlay").css({"display" : "none"});
});

​</p>

于 2012-09-22T23:58:52.793 回答