Question

所以我从头开始在网站上工作，我把它放在网上，以便你可以看到问题。基本上，当您将光标对准徽标时，如果您瞄准它的右侧，它也会提高徽标的不透明度。当你将鼠标悬停在它上面时，我只想让徽标变亮，但当你将鼠标放在导航栏上的任何地方时它会变亮。谢谢您的帮助！网站：http://www.saylorstudios.com/

HTML：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Saylor Studios</title>
        <link rel="stylesheet" href="css/normalize.css" media="all" rel="stylesheet" type="text/css"/>
        <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
    <body>
        <div class="background-canvas" style="height: 825px">   
            <header>
                <section class="navbar">
                    <div class="logotogether">
                        <a href="index.php" id="logo"><img src="img/logo.png" alt="logo"><p class="logotext">saylorstudios</a></p>
                    </div>
                    <nav>
                        <ul>
                            <li class="services <?php if ($section == "services") { echo "on"; } ?>"><a href="services.php">Services</a></li>
                            <li class="portfolio <?php if ($section == "portfolio") { echo "on"; } ?>"><a href="portfolio.php">Portfolio</a></li>
                            <li class="contact <?php if ($section == "contact") { echo "on"; } ?>"><a href="contact.php">Contact</a></li>
                        </ul>
                    </nav>
                </section>  
            </header>

CSS：

header {
    height: 50px;
}

.navbar {
    max-width: 960px;
    margin: 0px auto;
}

.navbar img {
    float: left;
}

.logotext {
    margin-top: 0;
    padding-top: 18px;  
}

.logotext a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 1.8em;
    margin-left: 5px;
}

.logotogether {
    opacity: 0.8;
}


.navbar img {
    padding-top: 10px;
}

nav {
    text-align: center;
}

nav ul {
    list-style: none;
    float: right;
    margin-top: -20px;
}

nav li {
    display: inline;
}

nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0.8;
    text-decoration: none;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    margin-top: 0;
}

.logotogether:hover {
    opacity: 1;

Answer 1

您可以通过在类“logotogether”之后再添加一个容器来解决问题，然后给它宽度为200px。然后将不透明度设置为0.8，然后在该容器上使用悬停伪选择器并将不透明度设置为1.您还可以添加过渡。如果这对您有用，请接受答案。

<强> HTML

<div class="logotogether">

 <div class="hoverclass"> <!-- Add this container here -->
  <a href="index.php" id="logo"><img src="img/logo.png" alt="logo"></a>
  <p class="logotext"><a href="index.php" id="logo">saylorstudios</a></p>
 </div>

</div>

<强> CSS

.hoverclass {
width: 200px;
opacity: 0.8;
 }
.hoverclass:hover {
opacity: 1;
 }

Answer 2

只需将这些情侣行添加到您的CSS：

.navbar:after {
    content:'';
    display:block;
    float:none;
}
.navbar:hover > .logotogether {
    opacity: 1;
}

第一个声明只是为了防止后期出现问题，第二个声明是直接解决你的问题

CSS - HTML文本突出显示它不应该的位置

2 个答案: