0

私のウェブサイトでは、アクティブなdivボックスを使用しているときに、側面のドットを変更したいと思います。ホバーは正常に機能しますが、アクティブを機能させることができません。画像をホバーしようとすると、画像のパスは正常に機能します。

#nav{
    z-index: 5;
    position: fixed;
    top: 50%;
    right: 20px;
}

#nav li {
    position: relative;
    height: 20px;
    width: 20px;
    margin-bottom: 15px;
}

#nav li a {
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: transparent url('images/dot.png') no-repeat;    
    opacity: 0.80;
}

#nav li a:hover {
    opacity: 1; 
}

#nav li a:active {
    background: transparent url('images/dotactive.png') no-repeat;  
}
4

3 に答える 3

0

CSSだけでは、画像をアクティブな背景のままにすることはできないと思います。javascriptも組み合わせて使用​​する必要があります。

jQueryを使用すると、次のようなものを試すことができます。

.active{background: url('images/dotactive.png') no-repeat !important;}

$('#nav li a').live('click',function () {
   $('.active').removeClass('active');
   $(this).addClass('active');
});​

アクティブなナビゲーションの背景画像を保持しているサイトのWorkignフィドルを編集します。http://jsfiddle.net/ukCG8/

于 2012-12-13T23:12:11.237 に答える
0

これを試してみてください

    background: url('images/dotactive.png') no-repeat;

透明にする必要はありません

または透明度にも不透明度を使用します

于 2012-12-13T23:20:51.653 に答える
0

これを試して：

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
 if (Lst) Lst.className='';
 obj.className='selected';
 Lst=obj;
}

/*]]>*/
</script>

そして、次のようにliアイテムを変更します。

<li>
<a onclick="CngClass(this);" href="#">Test 1
</a>
</li>

修正の功績を認められたらいいのにと思います。ここで実際にそれをチェックしてください（はい、私は別のWeb開発サイトでstackOverflowをだましています！）

于 2012-12-13T23:28:43.493 に答える