我正在尝试创建一个由 9 个图 block 组成的网格 - 它们将用作主页导航。这里期望的效果是让每个图 block 成为一个链接(显然)，具有半透明背景和完全不透明的文本(显然)在 mouseenter 上淡出图 block - 在 上淡出鼠标离开。
我已经在 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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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;
}
}
最佳答案
尝试使用:
$('.home_tile').hover(function(){
$(this).find('.text-js').fadeToggle();
},
function(){
$(this).find('.text-js').fadeToggle();
});
此处演示:http://jsfiddle.net/P4Zmn/
演示看起来有点不可靠，因为它缺少图像，但您可以看到它的功能。
关于jquery - JQuery 的高飞切换问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17715342/