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"> </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;
}
}