2

ユーザーが対応するページにいるときにホバーをアクティブに設定したいと思います。たとえば、ユーザーが HOME にいる場合、ホバーがアクティブになります。デフォルトのアイコンは白色で、対応するページでは緑色になります。

これは、jsfiddle http://jsfiddle.net/kQNHj/からの私の元のソースです

これが私の基本的なhtmlソースコードです

<div class="submenu">
    <div class="submenu-img" >        
        <a href="#"><div class="icon-home"></div></a>
        <a href="#"><div class="icon-groups"></div></a>
        <a href="#"><div class="icon-members"></div></a>                 
    </div>
</div>

そして、これは私のcssです

.submenu {
    background-color: #353535;
    overflow: hidden;
    position: relative;
}

.submenu-img {       
    float: left;
    position: relative;    
    padding: 30px 0 30px 0;
    margin-left: 35%;
}

/*--------------------------------------------------------------
    Submenu "Home" icon
--------------------------------------------------------------*/
.submenu-img .icon-home {
    background-image: url(http://imageshack.us/a/img607/9549/j3oe.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;
    height: 56px;
    width: 41px;
    margin: 0 55px 0 0;
    float:left;
}

.submenu-img .icon-home:hover {
    background-image: url(http://imageshack.us/a/img202/4181/nlnf.png);    
}

.submenu-img .icon-home:active {
    background-image: url(http://imageshack.us/a/img607/9549/j3oe.png);   
}

/*--------------------------------------------------------------
    Submenu "Groups" icon
--------------------------------------------------------------*/
.submenu-img .icon-groups {
    background-image: url(http://imageshack.us/a/img191/1220/9sb7.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;    
    height: 54px;
    width: 49px;
    margin: 0 55px 0 0;
    float: left;

}

.submenu-img .icon-groups:hover {
   background-image: url(http://imageshack.us/a/img818/6343/3vhv.png); 
}

.submenu-img .icon-groups:active {     
    background-image: url(http://imageshack.us/a/img191/1220/9sb7.png);
}

/*--------------------------------------------------------------
    Submenu "Members" icon
--------------------------------------------------------------*/
.submenu-img .icon-members {
    background-image: url(http://imageshack.us/a/img62/4964/6spa.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;    
    height: 54px;
    width: 64px;
    margin: 0 55px 0 0;
    float: left;
}

.submenu-img .icon-members:hover {
    background-image: url(http://imageshack.us/a/img842/6206/reko.png);
}

.submenu-img .icon-members:active {
    background-image: url(http://imageshack.us/a/img62/4964/6spa.png);
}
4

3 に答える 3

0

これを行う最善の方法は、David Pucko によって提案されました。HTML を生成するテンプレートを変更する可能性がある場合は、activeページの読み込み時に必要なアイコン (またはできればリンク) に のクラスを追加するだけです。ホバーしたように見せるには、CSS を次のように変更する必要があります。

.submenu-img .icon-groups.active {     
    background-image: url(http://imageshack.us/a/img191/1220/9sb7.png);
}

コロンではなくドットを使用したことに注意してください。の使い方は間違いです。:active

テンプレートを微調整できない場合 - 現在のアイコンを強調表示する唯一の方法は、jQuery を使用することです。または、必要に応じてバニラ JS で書き直すこともできます。

$(document).ready(function(){
    var current_url = window.location.href,
        top_menu_links = $('.submenu-img').children('a');

    switch (current_url) {
        case 'http://site.com/groups' :
        top_menu_links.eq(1).addClass('active');
        break;
      case label2:
        case 'http://site.com/members' :
        top_menu_links.eq(2).addClass('active');
        break;
      default:
        case 'http://site.com/' :
        top_menu_links.eq(0).addClass('active');
        break;
    }
});

eq()で使用される数値は、 1からではなく0から始まることに注意してください。

そしてまた。それが機能するためには、クラスのアイコンのcssスタイルを追加する必要がありますactive（上記の私の回答を参照）。

注: jsfiddle やその他のオンライン サービスで実際の例を提供することはできませんが、動作するはずです。

于 2013-09-06T14:19:33.737 に答える