こんにちは、私は sifr3 をいじっていましたが、少し読み込みが遅いですが許容範囲内で問題ないようです :)。ただし、私の問題はロールオーバー/ホバーにあります。
現在のページをアクティブな状態にできるようにしたいと思います。
これは、何らかの理由で子にスタイルを設定するだけで実行できます;)デフォルトの「a」色に変わります。しかし、他のリンクにカーソルを合わせると、a:link のデフォルトの色に変わりたいと思います。
sifr3 セレクターに応じて、javascript を使用して dom の css を変更しようとしました。しかし、毎回リロードを発行する必要があるようです。だから私はちょっと立ち往生しています。
これが私の現在のコードです
sIFR.replace(myriad, {
wmode: 'transparent',
selector: ' .myriad2',
css: {
'.sIFR-root': { 'color': '#ffffff', 'background': 'transparent', 'letter-spacing': '0', 'leading': '-10', 'font-size' : '18' },
'a': { 'text-decoration': 'none', 'color': '#5DB9FA' },
'a:link': { 'color': '#ffffff' },
'a:hover': { 'color': '#5DB9FA' }
},
forceSingleLine: true,
filters: {
DropShadow: {
knockout: false,
distance: 2,
color: '#000000',
alpha: .75,
angle: 120
},
BevelFilter: {
distance: 8,
angle: 90,
highlightColor: 0x000000,
highlightAlpha: 1,
blurX: 5,
blurY: 5,
strength: 1,
quality: 3,
type: 'inner',
knockout: false
}
}
});
<!--nav-->
<ul >
<li class="myriad2"><a class="current" href="#"><span >Home</span></a></li>
<li class="myriad2"><a href="#"><span>What we do</span></a></li>
<li class="myriad2"><a href="#"><span >Who we are</span></a></li>
<li class="myriad2"><a href="#"><span>Contact Us</span></a></li>
</ul>
<!--end nav-->
私は最適ではないことを知っており、css セレクターを #someId li に移動する予定です
しかし、私はまだ遊んでいます。
cssに追加するのが理想的です
css: {
'.sIFR-root': { 'color': '#ffffff', 'background': 'transparent', 'letter-spacing': '0', 'leading': '-10', 'font-size' : '18' },
'.sIFR-root:hover a.active { 'color' : '#ffffff' },
'a': { 'text-decoration': 'none', 'color': '#5DB9FA' },
'.sIFR-root:hover a.active:hover { 'color' : '#5DB9FA' },
'a.active { 'color' : '#5DB9FA' },
'a:link': { 'color': '#ffffff' },
'a:hover': { 'color': '#5DB9FA' }
しかし、それはうまく機能していないようです:/、
誰かがそれをどのように達成したかについての例やヒントを見てみたい.