navigation with cross fading images html5 css3 - html

Question

i'm trying to set up a navigation with cross fading images besides the nav. But placing the between the is not working.
So my intention is if home, about, work or contact is clicked the( one page ) will load the content and the navigation shows the right image of the current page.
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

That's a very unusual way to build a navigation. You don't even use anchor tags; those have the highest compatibility with older browsers for states like :hover.
For your example you need a syntax like this, for displaying the right images:
<span>About</span>
span {
background-image: none;
}
span#your_span_id:hover, span.selected {
background-image: url('path/to/your/img');
}
However, if you want to load content on one page, you will need at least javascript/ jquery to dynamically add/remove the '.selected' class. One CSS workaround is to nest your content divs in the navigation (and display: hide them, on hover show them), but in that case you need to specify the cursor for every element inside your content divs, and as soon as your visitors mouse out of the content div, it will disappear. Click events= javascript