Good day! There is a code: JSFiddle

html, body { margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; font-weight: 100; } .container { margin: 0 auto; max-width: 940px; padding: 0 10px; } /* Header */ .header { height: 800px; text-align: center; background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg) no-repeat center center scroll; background-size: cover; } .header .container { position: relative; top: 200px; } .header h1 { font-size: 80px; line-height: 100px; margin-top: 0; margin-bottom: 80px; color: #fff; text-transform: uppercase; } @media (min-width:850px) { .header h1 { font-size: 120px; } } .header p { font-weight: 500; letter-spacing: 8px; margin-bottom: 40px; margin-top: 0; color: #fff; text-transform: uppercase; } .header .btn { color: #fff; text-decoration: none; background-color: #000; padding: 10px 40px; transition: background .5s; } .btn:hover { background: #117bff; cursor: pointer; transition: background .5s; } /* Nav */ .nav ul { list-style: none; margin: 0 auto; text-align: center; text-align: left; margin-left: -40px; } .nav .btn { display: inline-block; color: #fff; padding: 30px 10px 31px 10px; transition: background .5s; } .nav { background-color: #000; } /* Main */ .main .container { margin: 80px auto; } .main .container img { width: 196px; float: left; margin-right: 80px; margin-bottom: 50px; margin-top: 50px; } /* Jumbotron */ .jumbotron { height: 600px; text-align: right; background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg) no-repeat center center scroll; background-size: cover; } .jumbotron .container { position: relative; top: 220px; } .jumbotron h2 { color: #fff; } .jumbotron p { color: #fff; padding-bottom: 20px; } .jumbotron .btn { color: #fff; background-color: #000; padding: 10px 40px; text-decoration: none; transition: background .5s; } .jumbotron .btn:hover { transition: background .5s; background: #117bff; } 
 <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'> <div class="header"> <div class="container"> <h1> Innovation cloud </h1> <p> Connect your ideas globally </p> <a href="#" class="btn">Learn More</a> </div> </div> <div class="nav"> <div class="container"> <ul> <li class="btn">Register</li> <li class="btn">Schedule</li> <li class="btn">Sponsors</li> <li class="btn">About</li> <li class="btn">Contact</li> </ul> </div> </div> <div class="main"> <div class="container"> <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" /> <h2>The Innovation Cloud Conference</h2> <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p> <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p> <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p> </div> </div> <div class="jumbotron"> <div class="container"> <h2> Stay Connected </h2> <p> Receive weekly insights from industry insiders. </p> <a href="#" class="btn">Join</a> </div> </div>

Please pay attention to the elements of HTML-code with class btn in sections Header , Nav and Jumbotron .

For the buttons in the header and nav .btn:hover rule works fine (when the mouse is .btn:hover , the buttons light up), but not for the button in the jumbotron section. For jumbotron I had to write a separate rule - .jumbotron .btn:hover .

Why is the .btn:hover rule common to all buttons not jumbotron button in jumbotron ?

  • because the .jumbotron .btn rule .jumbotron .btn by weight more than .btn:hover and is lower in the style list. therefore interrupts - lexxl 1:58 pm
  • @lexxl, I'm not talking about that. Initially, .jumbotron .btn no .jumbotron .btn rules .jumbotron .btn . I finished it, because The .btn:hover rule did not work for the button, which is located in the jumbotron section. So I ask - why .btn:hover did not work for this button? - Quatrack
  • I will clarify: I'm .jumbotron .btn about .jumbotron .btn , and not about .jumbotron .btn:hover - lexxl
  • @lexxl, I apologize - I did not carefully look at it. Well, then why .nav .btn perfectly accepts the rule .btn:hover though it has a selector similar to .jumbotron .btn and lies below .btn:hover , like .jumbotron .btn ? - Quatrack
  • .nav .btn does not set the background property ( background-color ), therefore in this case it has no effect - lexxl

1 answer 1

This behavior is due to the basic specifics of the work of cascading styles (CSS).
In this case, the .jumbotron .btn rule .jumbotron .btn by weight greater than .btn:hover and lies lower in the style list, therefore it interrupts the value for background its value.
To interrupt the effect of the .jumbotron .btn properties, you have to enter the .jumbotron .btn:hover selector.
And, for example, in the case of .nav .btn button's background changes during hover because This rule does not contain background-color properties and, as a result, has no effect.

I recommend to read a short article where these moments are briefly and clearly described: Cascading