Question

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

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

我还想知道在构建导航菜单方面，最好使用“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;
}

请参阅fiddle。

编辑：我见过有些人用JavaScript完成它但我希望看到它最好用CSS完成（虽然你可以用JQuery或其他方式向我展示其他选择）

Answer 1

<强>焦点

元素：focus是您正在寻找的pseudo class（。css选择器）。

请点击此处了解详情：6.6.1.2. The user action pseudo-classes :hover, :active, and :focus

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


：当用户使用指点设备指定元素时，应用hover伪类，但不一定要激活它。   例如，可视用户代理可以在何时应用此伪类   光标（鼠标指针）悬停在元素生成的框上。   不支持交互式媒体的用户代理不必   支持这个伪类。一些符合要求的用户代理支持   交互式媒体可能无法支持这种伪类（例如，   没有检测到悬停的笔设备。

：在用户激活元素时应用active伪类。例如，在用户按下的时间之间   鼠标按钮并释放它。在具有多个鼠标的系统上   button，：active仅适用于主要或主要激活   按钮（通常是“左”鼠标按钮）及其任何别名。

：焦点伪类适用于元素具有焦点（接受键盘或鼠标事件或其他形式的输入）。

试试这个css：

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

在这里，我updated your jsFiddle所以你得到了一个实例。

Answer 2

首先，它有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 。同样，当你降落在其他页面上时（例如，在 “关于”页面）将 activeState 类分配给“关于”链接。

CSS：如何在导航菜单中保留选定的图像

2 个答案: