これは、ホバーがFirefoxでは機能しているがIEでは機能していないコーディングです
.menu
{
margin-top:1px;
display:inline-block;
background-color:#FCFAB4;
color:#000000;
height:30px;
width:121px;
padding-top:10px;
font-size:13px;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:center;
}
.menu:hover
{
background-color:#990000;
color:#FFFFFF;
border-bottom:#CC0000;
text-decoration:none;
cursor:pointer;
}
助けて
「:hover」疑似クラスが IE の「a」タグ以外に実装されているとは思えません。別の方法を試してください (「onmouseover」イベントを使用してください)。
When you say IE it's better to let us know which (IE6/7/8). IE6 does not support :hover on anything but , IE7/8 do.
If you need this to work in IE6 you have a few options.
Refactor your code to only use 's in your menu.
Use a nice script from Dean Edwards to "upgrade" IE6 and IE7 for several issues such as this one. http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
You can use a bit of CSS and JS to give IE6 a way to recognise the :hover on other elements
/* Nice work around for IE6 issues with hover only being used on , con is that it needs javascript */
* html li {
behavior: expression(
this.onmouseover = new Function("this.className += ' hover'"),
this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
this.style.behavior = null
);
}
IE6 aside looking at your code I'm not really seeing how it works now. What you need is to have a menu element with what evers in it set to display:none, also you should position in using position:absolute/relative and top: XXpx/left: XXpx. Then on :hover you change to display: block.
Hope this helps, Denis
メニュー項目が、ユーザーが水平方向の「メニュー」から選択する可能性のあるリンクであると仮定すると、次のようになります。
<ul class="menu">
<li><a href="http://www.stackoverflow.com" accesskey="s">stackoverflow</a></li>
<li><a href="http://www.google.com" accesskey="g">google</a></li>
</ul>
この CSS を試してください:
.menu li{
display:inline;
list-style-type:none
}
.menu li a
{
margin-top:1px;
display:inline-block;
background-color:#FCFAB4;
color:#000000;
height:30px;
width:121px;
padding-top:10px;
font-size:13px;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:center;
}
.menu li a:hover
{
background-color:#990000;
color:#FFFFFF;
border-bottom:#CC0000;
text-decoration:none;
cursor:pointer;
}
順序なしリストをメニューとして使用している場合、リスト項目は「メニュー」ではなく、順序なしリストは「メニュー」なので、そこにクラスを適用します。CSS をアンカーに適用して、ホバー機能を実現します。
メニューが垂直の場合、.menu li スタイルの display:inline を無視します。
IE7 はアンカーで :hover をサポートしますが、IE8 は li でサポートします。