0

当您将鼠标悬停在任何框上时，我想要类似http://www.findawayworld.com/的效果。

这是我的代码：

    jQuery('.category-image-block').mouseover(function() {
                jQuery(this).stop().fadeTo(400, 0.9);
                jQuery(this).children(".category-image-block     div").stop().fadeTo(400, 1);


        });
        jQuery('.category-image-block').mouseout(function() {
            jQuery(this).stop().fadeTo(400, 1.0);
            jQuery(this).children(".category-image-block div").hide();
        });

        jQuery(".category-image-block div").hide();

效果即将到来，但它没有产生适当的效果。

我的“类别图像块”类的 div 包含图像和另一个带有“contenthover”类的隐藏 div。隐藏的 div 有 p 标签，其中包含文本。使用上面的代码，当我将鼠标悬停在 p 标签上时，会发生一些闪烁（不到 1 秒）。效果并不顺利。有什么建议吗？

4

3 回答 3

1

这是我解决它的方法：

http://jsfiddle.net/6WSNq/8/

拥有一个内部 div，这绝对是category-image-block让这个效果更容易获得。

问候

于 2012-07-28T12:52:33.607 回答
0

我会这样做：

$('.category-image-block').on('mouseenter mouseleave', function() {
    $(this).children(".category-hover-block").stop(true, true).fadeToggle(400);
});

小提琴

于 2012-07-28T13:04:15.540 回答
0

这几乎是他们所拥有的一个确切的例子。正如我之前在评论中指出的，请仔细注意 css 以及元素在布局中的位置。

另外：滚动到此答案的底部以获得纯 CSS 解决方案（节省您的时间和空间）

HTML

<div id="parent" class="parent">
    <img id="background" class="background" src="http://www.findawayworld.com/scraps/icecream1-310x180.jpg">
    <div id="child" class="child">
        <h3>Some Title Here</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere rutrum mollis. Vestibulum iaculis felis a felis interdum dictum. Duis quam ipsum, dictum in mollis nec, bibendum vel mauris.
        </p>
    </div>
</div>​

CSS

.parent {
    -moz-border-radius: .5em;
    border-radius: .5em;
    border: 3px groove #33FFFF;
    height: 180px;
    margin: 1em auto;
    position: relative;
    width: 310px;
}
.background {
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
.child {
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.child h3 {
    font-size: 1.3em;
    text-align: center;
}
.child p {
    margin: 1em auto;
    padding: 0px 1em;
    text-align: justify;
}

jQuery

$(function() {
    $("#parent").hover(function(eIn) {
        $("#child").stop(true, true).fadeIn("slow");
    },
    function(eOut) {
        $("#child").stop(true, true).fadeOut("slow");
    });
});​

jsFiddle

然而

请记住，这种确切的效果可以在 css 中完全实现，从而为您的 javascript 创建一个更小的脚注。我将尝试尽快获得一个 CSS2 和 CSS3 示例。

纯 CSS 解决方案

我为这个解决方案使用了相同的 jsFiddle（我只是没有将修改设置为基础，所以你会在修改 22 下找到它）。所以有一行异常 css，如下面的 css 中所述。我还注释掉了 JavaScript 以表明它是一个纯 CSS 解决方案，甚至应该具有一些 IE 兼容性。

CSS（*仅更改*）

/* Below used for pure CSS solution */
.child {
    display: block !important; /* simply to override previous css without making change for looking at js version */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
.parent:hover .child {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
}
/* End Solution */

jsFiddle

于 2012-07-28T13:16:56.697 回答