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

因此，我正在从头开始创建一个网站，我在网上放置该网站以便您可以看到问题。基本上，当你将光标指向标志时，如果你瞄准它的右侧，它也会提高标志的不透明度。当您将鼠标悬停在标记上时，我只想标记亮起，但当您将鼠标置于导航栏上的任何位置时，它会变亮。感谢您的帮助！网站：http://www.saylorstudios.com/CSS - HTML文本突出显示它不应该在的位置

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;

来源

2014-09-20 TheFlyingProgrammer

您可以通过在类“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; 
}

来源

2014-09-20 03:13:36 Leto

这几行只需添加到您的CSS：

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

首次声明只是为了防止问题在后期阶段，第二个声明是直接解决您的任务离子

来源

2014-09-20 03:13:08 Devin

嗯有意思，如果我可以问，什么是 “>” 做一个CSS声明？大于号？我会upvote你的答案，但我需要15“声誉” – TheFlyingProgrammer 2014-09-20 03:38:39

这是儿童组合，更多在http://www.w3.org/TR/selectors/#child-combinators。这意味着选择器将选择在该初始元素内进一步嵌套的元素。在你的情况下，当我们将导航栏悬停时，我们选择.logotogether类并应用一个类。就如此容易。如果你认为这个答案对你有帮助，那么将其标记为正确的，这将为你赚取积分，以便以后有能力做更多的事情 – Devin 2014-09-20 04:17:41

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

回答

相关问题