0

我正在尝试更改用户在导航菜单上选择的图像按钮，即：当用户悬停时，它将更改按钮颜色（我可以这样做）并且按钮效果将一直保持到用户选择按钮（这我不能做）。

我尝试使用“当前”或“选择”元素，但它不起作用。有什么建议吗？

我还想知道在构建导航菜单方面是使用“div”标签更好还是“li”标签更好？

到目前为止，HTML 看起来像这样：

<body>
<div class="menuBar">
    <div class="home">  <a href="#.php"></a></div>
    <div class="about"> <a href="#.php"></a></div>
    <div class="link">  <a href="#.php"></a></div>
    <div class="contact">   <a href="#.php"></a></div>
</div>
<body>

我的CSS是：

#menuBar {
    width:525px;
}

.home {
    float: left;
    margin-top: 0;
 }

.home a {
    background: 
    url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_01.jpg") 
    no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
}

.home a:hover {
    background: 
    url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg") 
    no-repeat scroll 0 0 transparent;
}

.about{
    float: left;
    margin-top: 0;
 }

.about a {
    background: 
    url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_02.jpg") 
    no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
}

.about a:hover {
    background: 
    url("http://s20.postimg.org/h6iyh457d/Nav_Over_02.jpg") 
    no-repeat scroll 0 0 transparent;
}

见小提琴。

已编辑：我见过一些人用 JavaScript 完成它，但我希望看到它最好用 CSS 完成（尽管你可以用 JQuery 或其他方式向我展示其他替代方案）

4

2 回答 2

0

首先，LI它就像符合代码中的模式一样好。

W3C 也推荐它，这就是他们构建示例的方式：http: //www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus

至于代码特定的问题。您需要在 CSS 中创建活动类并将其添加到您的链接 onClick 事件中：

CSS

.activeState {
    background:url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg") 
    no-repeat scroll 0 0 transparent;
}

如果站点结构都是静态的，那么当您登陆 Home.php 时，将 Home 链接的类设置为activeState。同样，当您登陆其他页面（例如在 About 页面上）时，将activeState类分配给 About 链接。

于 2013-06-17T21:19:08.983 回答
0

重点

element:focus 是您正在寻找的伪类（.css 选择器）。

在这里学习更多细节：6.6.1.2。用户操作伪类：hover、:active 和 :focus

交互式用户代理有时会更改渲染以响应用户操作。选择器提供了三个伪类来选择用户正在操作的元素。

  • :hover 伪类在用户使用指针设备指定元素时应用，但不一定激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合标准的用户代理可能无法支持这个伪类（例如，不检测悬停的笔设备）。
  • :active 伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上， :active 仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。
  • :focus 伪类在元素具有焦点时应用（接受键盘或鼠标事件，或其他形式的输入）。

试试这个CSS：

.about a:active,.about a:focus {
    background: url("path to your active-focus image") no-repeat scroll 0 0 transparent;
}

在这里，我更新了您的 jsFiddle，以便您获得一个实时示例。

于 2013-06-17T21:17:29.823 回答