0

我正在尝试创建一个由 9 个图块组成的网格 - 它们将用作主页导航。这里想要的效果是让每个图块成为一个链接（显然），它具有半透明的背景和完全不透明的文本（显然）在图块上mouseenter淡入 - 并在 上淡出mouseleave。

我在 CSS（实际上是 SCSS）中创建了所需的效果（减去淡入淡出）。如果可能的话，我想把这个硬编码到 CSS 中——如果用户关闭了 Javascript，作为后备。但我认为这是导致我的问题的原因。

mouseenter 工作正常 - mouseleave 淡出文本，然后将其淡入。如何防止这种情况发生？下面的代码：

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Lauren Barge Photography</title>
<link rel="stylesheet" type="text/css" href="common/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.home_tile_text').hide().removeClass('text').addClass('text-js');
    //$('.home_tile_overlay').hide().removeClass('text').addClass('text-js');

    $('.home_tile').mouseenter(function(){
        $(this).find('.text-js').fadeToggle();
    });
    $('.home_tile').mouseleave(function(){
        $(this).find('.text-js').fadeToggle();
    });
});
</script>
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <h1 class="main_logo">
                <a href="#">
                    <img src="common/img/header_logo_sm.jpg" alt="Lauren barge Photography" />
                </a>
            </h1>
        </div>
        <div id="content">
        <h2>Welcome.</h2>
            <div id="home_grid">
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_1">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_1">Tile Number 1</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_2">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_2">Tile Number 2</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_3">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_3">Tile Number 3</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_4">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_4">Tile Number 4</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_5">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_5">Tile Number 5</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_6">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_6">Tile Number 6</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_7">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_7">Tile Number 7</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                <a href="#" class="home_tile_link">
                    <div class="home_tile" id="home_tile_8">
                        <div class="home_tile_overlay">&nbsp;</div>
                        <div class="home_tile_text" id="tile_text_8">Tile Number 8</div>
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
                </a>
                    <div class="home_tile" id="home_tile_9">
                        <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img">
                    </div>
            </div>
        </div>
    </div>
</body>
</html>

SCSS

/* SCSS Document */

* { 
    margin: 0; 
    padding: 0; 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

#wrapper {
    height: 100%;
    width: 900px;
    margin: 0 auto;
}

#header {
    padding: 10px 0;
}

#content {
    padding: 0 20px;
}

#home_grid {
    width: 570px;
    margin: 0 auto;

    .home_tile {
        width: 150px;
        height: 150px;
        margin-top: 10px;
        margin: 14px;
        float: left;
        position: relative;

        .home_tile_text {
            width: 100%;
            text-align: center;
            display: none;
            position: absolute;
            bottom: 40%;
            font-size: 20px;
            color: white;
        }

        .home_tile_overlay {
            width: 150px;
            height: 150px;
            position: absolute;
            display: none;
            background: rgb(250, 96, 28); /* The Fallback */
            background: rgba(250, 96, 28, 0.5); 
        }

        &:hover {
            .home_tile_text {
                display: block;
            }

            .home_tile_overlay {
                display: block;
            }
        }
    }
}

h1.main_logo {
    width: 400px;
    height: 69px;

    a {
        border: none;
    }
}
4

2 回答 2

2

尝试使用：

$('.home_tile').hover(function(){
    $(this).find('.text-js').fadeToggle();
},
function(){
    $(this).find('.text-js').fadeToggle();
});

演示在这里：http: //jsfiddle.net/P4Zmn/

Demo 看起来有点狡猾，因为它缺少图像，但您可以看到功能。

于 2013-07-18T05:48:24.030 回答
1

试试这个：

$(document).ready(function() {
    $('.home_tile_text').hide().removeClass('text').addClass('text-js');
    //$('.home_tile_overlay').hide().removeClass('text').addClass('text-js');

    $('.home_tile').mouseenter(function(){
        $(this).find('.text-js').finish().hide().fadeIn();
    });
    $('.home_tile').mouseleave(function(){
        $(this).find('.text-js').finish().show().fadeOut();
    });
});

这首先确保任何出色的动画立即完成，然后执行我们想要的动作。我们确保只在“mouseenter”上淡入，只在“mouseleave”上淡出，而不是让fadeToggle 做正确的事情。

于 2013-07-18T06:00:47.127 回答