如何在菜单项上创建 a:hover 效果？

Question

我正在做一个网站，我想为每个菜单添加悬停效果items.I使用Primefaces menubar.For例如，我悬停在主页上，主页的背景颜色应该变成红色；我将鼠标悬停在about上，about的背景颜色应该变成蓝色等。我该怎么办？

<p:breadCrumb>
    <p:menuitem value="Main Page" style="text-decoration: none" url="#" />
    <p:menuitem value="About" style="text-decoration: none" url="#" />
    <p:menuitem value="Team" style="text-decoration: none" url="#" />
    <p:menuitem value="Gallery" style="text-decoration: none" url="#" />
    <p:menuitem value="Contact" style="text-decoration: none" url="#" />
</p:breadCrumb>

Answer 1

嗯，我不熟悉 primefaces 的工作原理，但我知道您可以在 css 中使用属性选择器：

[value="Main Page"]:hover {
  background-color: red;
} 
[value="About"]:hover {
  background-color: blue;
}
// ...etc.

这里有一些关于 css 属性选择器及其工作原理的信息： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors https://css-tricks.com/attribute-selectors/

更新由于属性选择器不起作用，这个怎么样：

<p:menuitem styleClass="main" value="Main Page" style="text-decoration: none" url="#" />   

.main:hover {
  background-color: red;
}

Answer 2

<html>
<head>
    <style>
        form
        {
            height:600px;
            width:600px;
            border:2px solid red;
        }
        form:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
        <form id="form1">
        -- Content --
        </form>
</body>

如何在菜单项上创建 a:hover 效果？

How do I create a:hover effect on menuitems?

css

xhtml

hover

primefaces