Меню. Картинка фона при наведении

367

28 мая 2017, 20:51

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

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