CODEWITHSUNDEEP
htmlcsshover
Wolk
Wolk

Reputation: 103

HTML/CSS - Keep hover effect when no longer hovered

I just started learning HTML/CSS and am working on a project to practice. I have a hover effect on my navbar that shows an image.

Nutrition and Social both have drop menus. When I hover the elements on the drop menu, the words "Nutrition" and "Social" obviously both reappear. How do I keep the hover effect even when I am no longer hovered on them?

Is it even possible? Is there a conditional statement I can use?

enter image description here

test.html

<!DOCTYPE html>

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="Test.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <header id="main-header">
        <div class="container">
            <h1><a href="test.html">Test</a></h1>
        </div>
    </header>

    <nav id="navbar">
            <ul>
                <li class="home-icon"><a href="#">Home</a></li>
                <li class="rout-icon"><a href="#">Routines</a></li>
                <li class="nutr-icon"><a href="#">Nutrition</a>
                    <ul>
                        <li><a href="#">Meals</a></li>
                        <li><a href="#">Diet Plans</a></li>
                        <li><a href="#">Calorie Tracking</a></li>
                    </ul>
                </li>
                <li class="abou-icon"><a href="#">About</a></li>
                <li class="cont-icon"><a href="#">Contact</a></li>
                <li class="phon-icon"><a href="#">Social</a>
                    <ul>
                        <li class="twitter"><a href="https://www.twitter.com" target ="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                        <li class="instagram"><a href="https://www.instagram.com" target ="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                        <li class="facebook"><a href="https://www.facebook.com" target ="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
                        <li class="youtube"><a href="https://www.youtube.com" target ="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
                    </ul>
                </li>
            </ul>
    </nav>

    <footer id="main-footer">
        <p>Copyright &copy; 2017 Test</p>
    </footer>

</body>



</html>

test.css

body {
    line-height: 1.6em;
    margin: 0;
    background-color: #fefefe;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

@font-face {
    font-family: "Saturday Sans ICG Bold";
    src: url("Fonts/Saturday Sans ICG Bold.tff");
    src: url("Fonts/saturday_sans_icg_bold-webfont.woff");
}

#main-header {
    color: #000;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

#main-header a {
    color: #000;
    text-decoration: none;
}

#navbar a {
    color: #808080;
    text-decoration: none;
    text-transform: uppercase;
}

#navbar ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

#navbar ul li {
    /*width:20%*/
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fefefe;
    border-top: 1px #f4f4f4 solid;
    border-bottom: 1px #f4f4f4 solid;
    margin-bottom: 1px;
    padding-top: 4px;
}

#navbar ul li a {
    display: block;
}

#navbar ul li ul li {
    border-right: 1px #f4f4f4 solid;
    border-left: 1px #f4f4f4 solid;
    display: none;
}

#navbar ul li:hover ul li {
    display: block;
}

#navbar ul li ul li:hover {
    opacity: .3;
}

/* Hover Picture */
#navbar li.home-icon:hover {
    background-image: url("Images/home_icon2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.home-icon > a:hover {
    opacity: 0;
}

#navbar li.rout-icon:hover {
    background-image: url("Images/dumbbell.jpg");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.rout-icon > a:hover {
    opacity: 0;
}

#navbar li.nutr-icon:hover {
    background-image: url("Images/fruit.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.nutr-icon > a:hover {
    opacity: 0;
}

#navbar .nutr-icon li {
    width: 100%;
}

#navbar li.abou-icon:hover {
    background-image: url("Images/about_icon.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.abou-icon > a:hover {
    opacity: 0;
}

#navbar li.cont-icon:hover {
    background-image: url("Images/contact_icon.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.cont-icon > a:hover {
    opacity: 0;
}

#navbar li.phon-icon:hover {
    background-image: url("Images/phone.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.phon-icon > a:hover {
    opacity: 0;
}

#navbar li.twitter a {
    color: #00aced;
    font-size: 30px;
}

#navbar li.instagram a {
    color: #bc2a8d;
    font-size: 30px;
}

#navbar li.facebook a {
    color: #3b5998;
    font-size: 30px;
}

#navbar li.youtube a {
    color: #ff0000;
    font-size: 30px;
}

#main-footer {
    text-align: center;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
    font-size: 10px;
    padding: 20px;
    margin-top: 250px;
    opacity: .5;
}

Upvotes: 0

Views: 976

Answers (1)

peter.mouland
peter.mouland

Reputation: 1983

Only a small tweak to do this. Instead of turning opacity to zero when hovering the a, keep with the hover effect on the li. e.g.

#navbar li.home-icon:hover > a {
    opacity: 0;
}

This work because the LI contains all it's children and as far as the CSS is concerned, when you 'hover' over the a you are also still hovering over the li

Upvotes: 1

Related Questions