0

好吧，我几乎实现了我的目标。有一个图像，当悬停时，一个 div 会随着文本和背景消失。问题是当用户悬停“新” div（文本和背景）时。

这是HTML：

<div id="wrap">
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/abstract" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/nature" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/sports" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/city" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/nightlife" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/people" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/food" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/animals" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
    </div>

这是我使用的 jQuery：

$(document).ready(function() {
    $("div.admin-img").hover(
        function () {
            $(this).siblings('.admin-txt').stop(true,true).fadeIn(100);
        },
        function () {
            $(this).siblings('.admin-txt').stop(true,true).fadeOut(100);
        });
    $("div.other-img").hover(
        function () {
            $(this).siblings('.other-txt').stop(true,true).fadeIn(100);
        },
        function () {
            $(this).siblings('.other-txt').stop(true,true).fadeOut(100);
        }); 
});

我怎样才能让它变得更好？而且，在小图像上，如何使背景覆盖整个图像？

在此先感谢，丹妮。

4

3 回答 3

2

问题是您在父 div 上使用了悬停切换。一旦您将鼠标悬停在子 div 上，您的父母就会失去焦点，因此会触发 unhover 事件。

您应该检查您的 unhover 事件以确定您是否已将光标移动到子项中，如果是这种情况，请取消该事件。

于 2011-05-13T16:08:31.703 回答
0

另一种选择是简单地定位您的 div 并使其不透明度 = 0。然后，将悬停分配给覆盖的 div 并将其淡化为 100% 不透明度。不再有悬停歧义。

于 2011-05-13T16:15:05.387 回答
0

http://jsfiddle.net/p8gWf/

对 javascript 部分所做的更改。

于 2011-05-13T16:18:51.223 回答