只想悬停在一个元素上以更改文本颜色

Question

如果您看到附加的jsfiddle，如果将鼠标悬停在信息中心上，则会变为黑色。我希望文本“信息中心”仅在<ul>而不是<p>标记悬停时变黑。这可能吗？我可以让它保持活动状态，以便用户知道他在当前页面上吗？

<div>
<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name"></li>
    </ul> <a href="#">
        <ul class="left">
            <li style="margin:10px;"><p style="color:white;">Dashboard</p></li>
        </ul>
    </a>

</nav>

Answer 1

将.top-bar ul:hover更改为.top-bar ul:hover p，给它填充，你应该好好去

编辑：以下是更改：

您的代码：

  .top-bar {
            height: 55px;
            background: #454545 !important;
        }
        .top-bar ul {
            -o-transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
            transition: .5s;
        }
        .top-bar ul:hover,  .top-bar ul li p:hover, .top-bar:last-child {
            background: #C3C3C3;
            color: black !important;

        }
        .top-bar ul li p:hover {
            color: black !important;
        }

编辑后的代码：

  .top-bar {
            height: 55px;
            background: #454545 !important;
        }
        .top-bar ul {
            -o-transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
            transition: .5s;
        }
        .top-bar ul p {
            padding:5px; /* Added padding to make it look more like a button */
        }
        .top-bar ul:hover p, .top-bar:last-child { /* changed .top-bar ul:hover to .top-bar ul:hover p and removed .top-bar ul li p:hover */
            background: #C3C3C3;
            color: black !important;

        }
        .top-bar ul li p:hover {
            color: black !important;
        }