Question

这是菜单：

<div class="navigation">
  <ul id="nav-menu">
    <li class="active">
      <div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span><br />HOME</a></div>
      <div class="blue-line"></div>
    </li>
    <li>
      <div class="sifr-r"><a href="#" title="property management" class="top-link"><span class="blue-small">02.</span><br />PROPERTY<br />MANAGEMENT</a></div>
      <div class="blue-line"></div>
      <ul>
        <li><a href="#" title="Rental returns">Rental returns</a></li>
        <li class="last"><a href="#" title="Resources">Resources</a></li>
      </ul>
    </li>
</ul>

和sIFR：

sIFR.replace(conduititc_light, {
  selector: '.sifr-r',
  css: [
    'a {color: #3c4a4b; text-decoration: none; margin-left: 4}',
    'a .blue-small {color: #00bbd6; font-size: 8}',
    'a:hover {color: #ffffff}',
    'a:hover .blue-small {color: #00bbd6}',
    'a.hover {color: #ffffff}'
  ],
  wmode: 'transparent'
});

当鼠标指向 li 时，如何在sIFR中保存悬停效果？没有sIFR，它是用js（mootools）制作的：

var nav = $('nav-menu');
nav.getElements('.sifr-r').each(function(item) {
  item.getParent().addEvents({
    'mouseover': function() {
      if (!item.getParent().hasClass('hover')) {
        item.getParent().addClass('hover');
      }
    },
    'mouseout': function() {
      if (item.getParent().hasClass('hover')) {
        item.removeClass('hover');
      }
    }
  });
});

和CSS：

.navigation ul li.hover a.top-link {color: white}

Answer 1

您需要在sIDE flash文件中创建悬停效果。 sIFR使用Flash SWF替换页面中的HTML元素。这个SWF根本不受CSS类的影响。

Answer 2

您需要替换<a>的父元素，以替换链接本身，而不是<a>元素的内容。

也就是说，Flash CSS对于嵌套在链接中的样式元素并不是很好，而且你使用linebreaks等也很复杂。也许不要在这里使用sIFR。

主菜单中的sIFR

2 个答案: