Question

我对网页设计有些新意，但我觉得我大多数时候都知道自己在做什么。我有几个div，所有类.picture都与.description div中的文本组合在一起。我正在使用jQuery，以便当用户将鼠标悬停在.picture div中的一张图片上时，分配给该特定图片的文本将淡入视图。我知道我可以给每个div一个id并在jQuery中单独访问它们，但是我可以做一些事情，比如循环，这样我就可以只调用.mouseenter()和.mouseleave()一次，但仍然动画所有的div？我应该将每对img和p分组到另一个div中吗？

HTML：

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! -->
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>

Answer 1

你可以这样做：

$("div.picture").mouseenter(function() {
    $(this).next().fadeIn();
}).mouseleave(function() {
    $(this).next().fadeOut();
});

这会将鼠标输入和鼠标离开事件处理程序绑定到所有"div.picture"项目。在事件处理程序中，this指的是鼠标移过的单个项目，然后.next()获取后面的元素 - 在您的情况下是描述div。

演示：http://jsfiddle.net/j83Dd/

或者您可以使用:hover pseudo-class与adjacent sibling + selector一起使用CSS，不使用JavaScript来执行此操作：

div.description {
    display : none;
}
div.picture:hover + div.description {
    display : block;
}

演示：http://jsfiddle.net/j83Dd/1/

哎呀，忘记了CSS解决方案的淡出：

div.description {
    opacity : 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
div.picture:hover + div.description {
    opacity : 1;
}

演示：http://jsfiddle.net/j83Dd/2/

以上所有内容都取决于您现有的html结构。

“我应该将每对img和p分组到另一个div吗？”

在我看来，你可以将img和p组合成一个div，而不是在他们自己的div中同时添加一个容器div。在我看来，将它们与div组合是有道理的，因为这清楚地表明它们属于一个整体，但你不必......

Answer 2

由于HTML的结构，您可以编写一个通用的.mouseenter（）函数来处理这种情况。由于相关的.description div始终位于.picture div之后，因此您可以使用$(this).next("div.description p");访问相关说明。您可以使用.text（）方法读取文本，或使用动画使div.description可见。

.mouseleave（）函数可以类似，隐藏相关文本。或者，您可以使用:visible选择器隐藏所有描述文本。有时候精确是好的，有时候简单很好。看看适合您的设计。

Answer 3

如果您不希望您的javascript依赖于html结构，您可以将html更改为：

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic1"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! -->
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic2"><p>Gus</p></div><br/>
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic3"><p>Gus</p></div><br/>

我已向.description div添加了新属性：data-pic-id，其中包含与对应id的{{1}}相同的值。

这将允许您准备将与html结构分开的javascript：

.picture

jQuery - 单独选择一个类中的div

3 个答案: