HTML code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Monitoring</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="wrapper"> <header> <span class="logo"><a href="index.html"><img src="img/logo.png" alt="LOGO"></a></span> <span class="navigation">Monitoring</span> <span class="user"> USER NAME <a href="user.html" class="usermenu"><img src="img/user-menu-down.png" alt="User menu"></a> </span> <span class="verline"><img src="img/ver-line.png" alt="Line"></span> </header> <div class="sidebar"> <nav> <ul> <li><a href="home.html" title="Home"><img src="img/monitoring.png" alt="Home">Home</a></li> <li><a href="monitoring.html" title="Monitoring"><img src="img/monitoring.png" alt="Monitoring">Monitoring</a></li> <li><a href="schedule.html" title="Schedule"><img src="img/schedule.png" alt="Schedule">Schedule</a></li> </ul> </nav> </div> <div class="content"> </div> </div> </body> </html>

CSS code:

 * { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } body { background: #fff; font: 14px/1.5 Open Sans Regular; } .wrapper { width: 1000px; margin: 0 auto; } /*HEADER START*/ header { background: #d7dde4; height: 70px; } .logo { float: left; background: #384655; padding: 20px 0 0 22px; height: 50px; width: 208px; } .navigation { padding: 23px 0 0 20px; color: #7e8e9f; float: left; } .user { padding: 23px 0 0 0; color: #4f5f6f; float: right; } .usermenu { padding: 0 10px 0 5px; float: right; } .verline { float: right; padding: 22px 10px 0 0; } /*HEADER END*/ .sidebar { width: 230px; height: calc(100vh - 70px); float: left; padding: 0; background: #4f5f6f; } /*SIDEBAR START*/ .sidebar nav { float: left; clear: left; } .sidebar li { float: left; margin: 25px 50px 13px 20px; } .sidebar li a { color: #b5bac0; } .sidebar li:hover a{ color: #fff; } .sidebar li:hover a img{ opacity: 1; } .sidebar img { padding-right: 10px; vertical-align: middle; opacity: 0.5; } /*SIDEBAR END*/ .content { width: 770px; height: calc(100vh - 70px); float: left; background: #f0f3f6; }

It is necessary that Monitoring in the background has one color, since This is the monitoring page, and when you hover the cursor on Schedule, the background color was different. Here is the screen: https://hkar.ru/Pjmu

    1 answer 1

    For this there is a simple solution, add a separate class to the third menu item and write css code for it when you hover:

     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Monitoring</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="wrapper"> <header> <span class="logo"><a href="index.html"><img src="img/logo.png" alt="LOGO"></a></span> <span class="navigation">Monitoring</span> <span class="user"> USER NAME <a href="user.html" class="usermenu"><img src="img/user-menu-down.png" alt="User menu"></a> </span> <span class="verline"><img src="img/ver-line.png" alt="Line"></span> </header> <div class="sidebar"> <nav> <ul> <li><a href="home.html" title="Home"><img src="img/monitoring.png" alt="Home">Home</a></li> <li><a href="monitoring.html" title="Monitoring"><img src="img/monitoring.png" alt="Monitoring">Monitoring</a></li> <li class="schedule"><a href="schedule.html" title="Schedule"><img src="img/schedule.png" alt="Schedule">Schedule</a></li> </ul> </nav> </div> <div class="content"> </div> </div> </body> </html> * { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } body { background: #fff; font: 14px/1.5 Open Sans Regular; } .wrapper { width: 1000px; margin: 0 auto; } /*HEADER START*/ header { background: #d7dde4; height: 70px; } .logo { float: left; background: #384655; padding: 20px 0 0 22px; height: 50px; width: 208px; } .navigation { padding: 23px 0 0 20px; color: #7e8e9f; float: left; } .user { padding: 23px 0 0 0; color: #4f5f6f; float: right; } .usermenu { padding: 0 10px 0 5px; float: right; } .verline { float: right; padding: 22px 10px 0 0; } /*HEADER END*/ .sidebar { width: 230px; height: calc(100vh - 70px); float: left; padding: 0; background: #4f5f6f; } /*SIDEBAR START*/ .sidebar nav { float: left; clear: left; } .sidebar li { float: left; margin: 25px 50px 13px 20px; } .sidebar li a { color: #b5bac0; } .sidebar li:hover a{ color: #fff; } .sidebar li.schedule:hover a{ color: red; /*вот код для отдельного цвета при наведении на schedule*/ } .sidebar li:hover a img{ opacity: 1; } .sidebar img { padding-right: 10px; vertical-align: middle; opacity: 0.5; } /*SIDEBAR END*/ .content { width: 770px; height: calc(100vh - 70px); float: left; background: #f0f3f6; }
    • There was a view of the background color - Oleg From
    • Background color of what? in the picture underline 2 different or in the code? - Raz Galstyan