Question

我正在尝试创建一个无序列表，每个li元素都有自己的背景图像（没有文本，只是图像），但我遇到了麻烦（至少在Firefox中，它在Safari中有效）获取链接上班。在Firefox中，图像在悬停时更改，但不允许您单击。如何让它在Firefox中运行？我已经在li标签内外尝试了A标签。

这是CSS ...

#menu   {
   width:107px;
   height:200px;
}

#menu-1, #menu-1-active, #menu-2, #menu-2-active, #menu-3, #menu-3-active, #menu-4, #menu-4-active, #menu-5, #menu-5-active, #menu-6, #menu-6-active    {
   width:107px;
   height:29px;
   padding-bottom:5px;
   background-repeat: no-repeat;
   display:block;
   text-indent: -999px;

}

#menu-1   {
   background-image: url(menu1.png);
}
#menu-1:hover   {
   background-image: url(menu1on.png);
}
#menu-1-active   {
   background-image: url(menu1on.png);
}


#menu-2   {
   background-image: url(menu2.png);
}
#menu-2:hover   {
   background-image: url(menu2on.png);
}
#menu-2-active   {
   background-image: url(menu2on.png);
}

etc

这是HTML ......

<div id="menu">
<ul>

<a href="1"><li id="menu-1-active">
One
</li></a>
<a href="2"><li id="menu-2">
Two
</li></a>
<a href="3"><li id="menu-3">
Three
</li></a>
<a href="4"><li id="menu-4">
Four
</li></a>
<a href="5"><li id="menu-5">
Five
</li></a>
<a href="6"><li id="menu-6">
Six
</li></a>

</ul>
</div>

Answer 1

您需要将标签放在li标签内。然后将a标签设置为display：block;这将导致a标签填满li标签内的所有空间，并使整个区域可以点击。

例如：

<style type="text/css" media="screen">
    a {
        display: block;
    }
</style>

<ul>
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2-active"><a href="3">One</a></li>
</ul>

Answer 2

链接需要位于<li>内，作为开头，因为<li>是块级元素，而<a>是内联的。

另外，设置：将鼠标悬停在除<a>以外的其他元素上 - 虽然支持FF等等 - 在我的体验中有点参与工作，并且在旧IE中根本不起作用。< / p>

就个人而言，如果是我编写HTML，它看起来像这样：

<ul id="menu">
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2"><a href="2">Two</a></li>
    <li id="menu-3"><a href="3">Three</a></li>
    <li id="menu-4"><a href="4">Four</a></li>
    <li id="menu-5"><a href="5">Five</a></li>
    <li id="menu-6"><a href="6">Six</a></li>
</ul>

CSS将类似于以下内容：

#menu{
    width:107px;
 height:200px;
}
#menu li{
    padding: 0, 0, 5px;
}
#menu li a{
    display: block;
    text-indent: -999px;
    height: 29px;
    background: transparent, none, center, center, no-repeat;
}

#menu-1 a:link, #menu-1 a:visited { background-image: url(menu1.png); }
#menu-1 a:hover, #menu-1 a:active, #menu-1-active { background-image: url(menu1on.png); }

/** Continue on with your other links here... **/

List元素内外的链接不起作用

2 个答案: