CODEWITHSUNDEEP
htmlcss
Rex
Rex

Reputation: 1144

Want hover on only one element to change text color

If you see the attached jsfiddle and if you hover over the dashboard , it turns black. I want the text "Dashboard" to turn black on just the hover of the <ul> and not the <p> tag. Is this possible? And can I make it stay active so that the user knows he is on the current page?

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

Upvotes: 0

Views: 132

Answers (1)

Mike Donkers
Mike Donkers

Reputation: 3699

Change the .top-bar ul:hover to .top-bar ul:hover p, give it a padding, and you should be good to go

EDIT: Here are the changes:

Your code: 

  .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;
        }

The edited code:

  .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;
        }

Upvotes: 3

Related Questions