Question

我刚开始学习HTML / CSS，正在开展一个练习项目。我的导航栏上有一个悬停效果，显示图像。

营养和社交都有下降菜单。当我将元素悬停在下拉菜单上时，单词＆＃34; Nutrition＆＃34;和＃34;社交＆＃34;显然两者都重新出现了。即使我不再徘徊在悬停效果上，如何保持悬停效果呢？

甚至可能吗？我可以使用条件语句吗？

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

Answer 1

这只是一个小小的调整。当悬停a时，不要将不透明度变为零，而是将悬停效果保持在li上。 e.g。

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

这项工作是因为LI包含所有孩子，就CSS而言，当你“悬停”在a之上时，你仍然hover li {{1}}

HTML / CSS - 不再悬停时保持悬停效果

1 个答案: