4

IE9で奇妙な動作をしているこの選択があります。まず、ウィキ ページを開く必要があるリンクが IE9 ブラウザでのみ機能せず、2 つ目の問題がホバーにあります。カーソルがヘルプを通過してログオフすると、ホバーの背景色によってアイコンが上書きされるのはなぜですか?

<ul id="main">
        <li class="username" tabindex="1" >  <a>USER</a>
            <ul class="curent_buser">
                <li class="help"><a href="http://www.wikipedia.org/">Help</a></li>
                <li class="logoff"><a href="http://www.wikipedia.org/">LogOff</a></li>
            </ul>
        </li>
    </ul>

CSS:

ul#main {
    color: gray;
    width: 120px;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    list-style: none;
    font-size: 12px;
    letter-spacing: -1px;
    font-weight: bold;
    text-decoration: none;
    height:30px;
    background:green;
}



ul#main:hover {
    opacity: 0.7;
    text-decoration: none;
}

#main > li{
    background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
    outline:0;
    padding:10px;
}

ul#main li ul {
    display: none;
    width: 116px;
    background: transparent;
    border-top: 1px solid #eaeaea;
    padding: 2px;
    list-style: none;
    margin: 7px 0 0 -3px;
}


ul.curent_buser li a {
    color: gray;;
    cursor: pointer;
}
ul.curent_buser{
    background:lime !important;    
    }


    ul#main li ul li a {
    display: block;
    padding: 5px 0;
    position: relative;
    z-index: 5;
}


#main li:focus ul, #main li.username:active ul {
    display: block;
}

.help{
    background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
    height: 25px;
    margin-bottom: 2px;
    border-bottom: 1px solid white;
}       

.help:hover{    
background: #f4f4f4;


}

.logoff{
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat  100% center ;
    height: 25px;
}


.logoff:hover{
    background: #f4f4f4 ;
    height: 25px;
}

.help a,.logoff a{
    color:gray;
    font-family: Museo700Regular,sans-serif;
    letter-spacing: 0;
    font-size: small;
}

​

フィドル: http://jsfiddle.net/RwtHn/1455/

4

3 に答える 3

4

少なくともアイコンの問題についてはお手伝いできます。問題は、背景を色で上書きしていることです。色または背景画像を使用できます。両方ではありません。基本的に同じであるが色が異なる背景に別の画像を配置するか、ホバー時に画像なしで行うか、ホバー時に色なしで行う必要があります。

IE の問題についてこれ以上お役に立てず申し訳ありません。私はこのようなことでIEを心から嫌います。

編集：これは、以下のコメントで述べたようにできることです

 .logoff:hover{
             background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png");
             height: 25px;
    }

この情報についてANevesに感謝します。私もここで学んだことがあります。

于 2012-10-15T14:12:45.793 に答える
3

OK、オーバーライドされたアイコンの問題のクレジットは「ANeves」です。

ただし、余分なコード行を防ぐために以下の CSS を使用できます。

#main > li > ul > li:hover
{
    background-color: #f4f4f4;
}

IE9 のクリックの問題については、CSS の下に追加するだけです。

#main ul:hover
{
    display: block;
}

以上です

http://www.cssplay.co.uk/menus/cssplay-click-click.htmlに感謝

于 2012-10-29T20:12:02.713 に答える
3

ホバーすると、backgroundプロパティがオーバーライドされます。このプロパティには色と画像の両方があるため、画像もオーバーライドしています。

次に、色のみを設定します。

.help:hover{    
    background-color: #f4f4f4;
}
.logoff:hover{
    background-color: #f4f4f4 ;
}

http://jsfiddle.net/RwtHn/1456/

于 2012-10-15T14:39:01.983 に答える