導航與交叉淡入淡出的圖像html5 css3

Question

我試圖設置除導航以外的交叉淡入淡出的圖像導航。但放置之間不起作用。

所以我的意圖是，如果家，大約，工作或聯繫點擊（一頁）將加載內容和導航顯示當前頁面的正確形象。

HTML: <div id="cf7" class="shadow"> 
<img class='opaque' src="/images/Cirques.jpg" /> 
    <img src="/images/Clown%20Fish.jpg;" /> 
    <img src="/images/Stones.jpg;" /> 
    <img src="/images/Summit.jpg;" /> 
</div> 
<p id="cf7_controls"> 
    <span class="selected">Home</span> 
    <span>About</span> 
    <span>Work</span> 
    <span>Contact</span> 
</p> 



    CSS 
p#cf7_controls { 
    text-align:center; 
} 
#cf7_controls span { 
    padding-right:2em; 
    cursor:pointer; 
} 
#cf7 { 
    position:relative; 
    height:281px; 
    width:450px; 
    margin:0 auto 10px; 
} 
#cf7 img { 
    position:absolute; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    opacity:0; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
} 

#cf7 img.opaque { 
    opacity:1; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=1); 
} 

JAVASCRIPT 
$(document).ready(function() { 
    $("#cf7_controls").on('click', 'span', function() { 
    $("#cf7 img").removeClass("opaque"); 

    var newImage = $(this).index(); 

    $("#cf7 img").eq(newImage).addClass("opaque"); 

    $("#cf7_controls span").removeClass("selected"); 
    $(this).addClass("selected"); 
    }); 
}); 

Answer 1

這是構建導航的非常不尋常的方式。你甚至不使用錨標籤;這些與舊版瀏覽器的兼容性最高，例如：懸停。

爲了您的例子中，你需要一個語法像這樣，用於顯示右圖像：

<span>About</span> 

span { 
background-image: none; 
} 
span#your_span_id:hover, span.selected { 
background-image: url('path/to/your/img'); 

}

但是，如果你想在一個頁面上加載內容，你至少需要javascript/jquery動態添加/刪除'.selected'類。一個CSS解決方法是在導航中嵌套內容div（並顯示：隱藏它們，懸停顯示它們），但在這種情況下，您需要爲內容div中的每個元素指定光標，只要您的訪問者鼠標脫離內容div，它會消失。點擊事件= javascript