带有交叉淡入淡出图像的导航html5 css3答案

【问题标题】：navigation with cross fading images html5 css3带有交叉淡入淡出图像的导航html5 css3
【发布时间】：2013-04-28 17:53:16
【问题描述】：

我正在尝试设置一个导航，除了导航之外还带有交叉淡入淡出的图像。但是在两者之间放置是行不通的。

所以我的意图是，如果单击主页、关于、工作或联系人，（一页）将加载内容，并且导航会显示当前页面的正确图像。

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

【问题讨论】：

标签： html image css navigation

【解决方案1】：

这是构建导航的一种非常不寻常的方式。你甚至不使用锚标签；对于 :hover 等状态，它们与旧版浏览器的兼容性最高。

对于您的示例，您需要这样的语法来显示正确的图像：

<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

【讨论】：