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文本突出顯示它不應該在的位置

回答

相關問題