CODEWITHSUNDEEP
htmlcss
Eliot S Winchell
Eliot S Winchell

Reputation: 368

CSS - HTML Text is highlighting where it shouldn't be

So I'm working on a website from scratch, which I put online so that you could see the issue. Basically, when you aim your cursor towards the logo, if you aim to the right of it it will raise the opacity of the logo too. I just want to logo to brighten up when you hover over it but it brightens up when you put your mouse anywhere on the navbar. Thank you for your help! Site: 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;

Upvotes: 0

Views: 64

Answers (2)

Leto
Leto

Reputation: 503

You could solve the problem by adding one more container after your class `logotogether' and then give it a width of say 200px. Then set opacity to 0.8, then use the hover pseudoselector on that container and set opacity to 1. you can also add transitions. If this worked for you please accept the answer.

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

Upvotes: 2

Devin
Devin

Reputation: 7720

Just add these couple lines to your CSS:

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

the first declaration is only to prevent issues at later stages, the second declaration is the direct solution to your question

Upvotes: 1

Related Questions