0
我正在嘗試創建9個網格的網格 - 它們將用作主頁導航。這裏期望的效果是讓每個圖塊成爲明顯具有半透明背景和完全不透明文本的鏈接（顯然），其在mouseenter上的圖塊淡出 - 並且在mouseleave上淡出。Goofy用JQuery切換問題
我已經在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;
}
}
請發佈一個功能示例，說明您在[jsFiddle] （http://jsfiddle.net/）。 –