Question

我将鼠标悬停在不同的项目上时切换内容。我制作的CSS显示了另一个相对于正在徘徊的div的div。我使我的菜单项在鼠标悬停时更改了背景颜色，但我不能让它们更改文本修饰。我在这里缺少什么？

我有这个小提琴：

<div id="mainContainer">
        <div id="topLogo" class="topLogo"><h1>Logo</h1></div>
        <div id="containerMenu" class="menuContent">
            <div id="menuItemA" class="menuItem">Menu 1</div>
            <div id="menuContent1" class="contentItem">First text</div>
            <div id="menuItemB" class="menuItem">Menu 2</div>
            <div id="menuContent2" class="contentItem">Second text</div>
            <div id="menuItemC" class="menuItem">Menu 3</div>
            <div id="menuContent3" class="contentItem">Third text</div>
            <div id="menuItemD" class="menuItem">Menu 4</div>
            <div id="menuContent4" class="contentItem">Fourth text</div>
        </div>
    </div>

CSS：

.topLogo
{
    height: 200px;
}

.menuContent
{
    width: 90%;
    margin:auto;
    min-width: 600px;
    white-space:nowrap;
}

.menuItem
{
    display:inline-block;
    padding:20px;
    width: 20%;
    text-align:center;
    cursor: pointer;
    min-width: 150px;
}

    .menuItem:hover
    {
        font: bold;
        text-decoration: navy solid underline;
        background-color: lightblue;
    }

.contentItem
{
    display:none;
}

.menuItem:hover + .contentItem
{
    display:block;
    position:absolute;
}

Answer 1

只需将text-decoration:从text-decoration: navy solid underline;更改为text-decoration:underline，就像这样：

.menuItem:hover{font:bold;text-decoration:underline;background-color:lightblue;}

revised jsFiddle

以下是text-decoration的唯一有效参数：

https://css-tricks.com/almanac/properties/t/text-decoration/

Answer 2

text-decoration仅采用装饰类型，而不是颜色或图案。使用text-decoration-color指定下划线的颜色。你的CSS应该是：

text-decoration: underline;
text-decoration-color: navy;

对于Firefox，您可能需要添加moz-text-decoration-color: navy;

Answer 3

试试这个：

.menuItem:hover
{
    font: bold;
    text-decoration: underline;
    background-color: lightblue;
}

Answer 4

您的menuitem：悬停类具有可用的文本修饰。海军实心下划线部分使你的下划线海军色。如果要更改文本颜色，则应使用

color:red;

或您想要的任何其他颜色，在您的menuitem中：悬停类

文本装饰不在其他一切的情况下悬停

4 个答案: