1

我对网页设计有点陌生，但我觉得我大多知道自己在做什么。我有几个 div，所有类.picture都与 div 内的文本分组.description。我正在使用 jQuery，因此当用户将鼠标悬停在.picturediv 中的一张图片上时，分配给该特定图片的文本将淡入视图。我知道我可以给每个 div 一个 id 并在 jQuery 中单独访问它们，但是我可以做一些事情，例如循环，这将允许我调用一次，但仍然为所有 div 设置动画.mouseenter()？.mouseleave()我应该将每对 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/>
4

3 回答 3

2

你可以这样做：

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

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

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

:hover或者你可以通过使用伪类和相邻的兄弟+选择器来只用 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 将它们分组是有道理的，因为这清楚地表明它们属于一起，但你不必......

于 2013-06-29T23:30:27.783 回答
0

由于 HTML 的结构，您可以编写一个通用的 .mouseenter() 函数来处理这种情况。因为相关的.descriptiondiv 总是紧跟在 .picture div 之后，所以你可以使用 .picture 访问相关的描述$(this).next("div.description p");。您可以使用 .text() 方法阅读文本，或使用动画使 div.description 可见。

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

于 2013-06-29T23:31:08.570 回答
0

如果您不希望您的 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/>

我为.descriptiondiv 添加了新属性：它包含与对应data-pic-id的 相同的值。id.picture

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

$('.picture').mouseenter( function() {
    var id = $(this).attr('id');
    $('[data-pic-id="'+id+'"]').fadeIn();
});
于 2013-06-29T23:36:05.963 回答