Question

我正在做一个wesite，我想为每个菜单项添加悬停效果。我使用Primefaces进行菜单栏。例如，我将鼠标悬停在主页上，主页的背景颜色应该变为红色;我徘徊在约，背景颜色约应该变成蓝色等我该怎么办？

<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>

如何在menuitems上创建：悬停效果？

2 个答案: