gpt4 book ai didi

html - CSS:如何保持在导航菜单中选择的图像

转载 作者:行者123 更新时间:2023-11-28 12:48:46 25 4
gpt4 key购买 nike

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

我尝试使用“current”或“select”元素,但没有用。有什么建议吗?

我还想知道在构建导航菜单方面是使用“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 或其他方式向我展示其他替代方案)

最佳答案

专注

元素:焦点是 pseudo class (.css 选择器)您正在寻找。

在这里学习更多细节:6.6.1.2. The user action pseudo-classes :hover, :active, and :focus

Interactive user agents sometimes change the rendering in response to user actions. Selectors provides three pseudo-classes for the selection of an element the user is acting on.

  • The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not that do not support interactive media do not have to support this pseudo-class. Some conforming user agents that support interactive media may not be able to support this pseudo-class (e.g., a pen device that does not detect hovering).
  • The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
  • The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).

试试这个 CSS:

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

在这里,我 updated your jsFiddle所以你得到了一个活生生的例子。

关于html - CSS:如何保持在导航菜单中选择的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17156754/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com