2

HTML код:

<!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 код:

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

Необходимо, чтобы у Monitoring в бэкграунде был один цвет, т.к. это страница мониторинга, а при наведении курсором на Schedule цвет бэкграунда был другой. Вот скрин: https://hkar.ru/Pjmu

1 ответ 1

1

Для этого есть простое решение, добавляем в третий пункт меню отдельный класс и пишем код css для него при наведении:

<!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;
}
2
  • Имелось ввиду цвет бэкграунда 27 мая 2017 в 13:09
  • Цвет бэкграунда чего? на картинке подчеркните 2 разные или в коде? 27 мая 2017 в 14:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.