Проблема с тенью у div'а

186
10 апреля 2017, 04:29

У меня возникла проблема с тенью, она срабатывает только если навести на нижную часть дива, в ином случае не срабатывает, как пофиксить?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MetPG - Металлургический портал</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="css/bootstrap.css"/>
  <link rel="stylesheet" href="css/bootstrap-theme.css"/>
  <link rel="stylesheet" href="css/font-awesome.css"/>
  <link rel="stylesheet" href="css/font-awesome.min.css"/>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <meta name="viewport" content="width=450, initial-scale=1.0"/>
</head>
<body>
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
    <div class="header">
        <div class="col-sm-offset-2 col-md-2 col-xs-12 col-lg-2">
          <a href="#"><img src="img/logo.png" class="logo"></a>
        </div>
        <div class="col-md-3 col-xs-12 col-lg-3">
          <p class="inheader">Все заявки и поставщики в одном месте</p>
          <p class="outcounter">Заявок вчера:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p>
          <p class="outcounter2">Заявок сегодня:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p>
        </div>
         <div class="col-md-2 col-xs-12 col-lg-3">
             <i class="fa fa-sign-in" aria-hidden="true"></i><a class="logreg" href="#">Вход</a><a class="logreg"> | </a><a class="logreg" href="#">Регистрация</a>
             <div class="button"><a class="onbutton" href="#">Оставить заявку поставщикам</a></div>
         </div>
      </div>
      <div class="orange"/>
      <div class="header2">
        <a class="downloadprog" href="#">Скачать программу для поставщиков</a>
        <div class="info"><i class="fa fa-info fa-lg" aria-hidden="true"></i>
         <div class='info-tooltip'>Сервис находится в разработке</div>
        </div>
      </div>
    <div class="background">
      <div class="left">
       <div class="col-md-2 col-xs-12 col-lg-2">
        <div class="rightcontainer">
        </div>
        <div class="rightcontainer2">
        </div>
      </div>
      </div>
      <div class="middle">
       <div class="col-md-8 col-xs-12 col-lg-8">
        <div class="middlecontainer">
        </div>
        <div class="middlecontainer">
        </div>
        <div class="middlecontainer">
        </div>
       </div>
       </div>
      </div>
      <div class="right">
       <div class="col-md-2 col-xs-12 col-lg-2">
       </div>
      </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
* {
  font-family: 'Open Sans', sans-serif;
}
html, body {
  padding: 0;
  margin: 0;
  background: #eeeeee;
}
/*Шапка*/
.header2 {
  background-image: url('img/head2.png');
  position: relative; 
  width: 100%;
  height: 140px;
  display: inline-block;
  margin-top: 2px;
  padding: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 52% 90%, 50% 100%, 48% 90%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 52% 90%, 50% 100%, 48% 90%, 0 90%);
  z-index: 10;
}
.header {
  background-image: url('img/headbackground.png');
  background-repeat: no-repeat;
  position: relative;  
  width: 100%;
  height: 140px;
  display: inline-block;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.orange{
  background: #fc8006;
  width: 100%;
  height: 2px;
  position: relative;
  margin-top: -0.3%;
  display: inline-block;
}
/*Шапка*/
/*Левая часть*/
.logo {
  width: auto;
  height: auto;
  position: relative;
  margin-top: 9%;
}

/*Левая часть*/
/*Центр сайта*/
p.inheader {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.475em;
  position: relative; 
  color: #fff;
  margin-top: 5%;
  font-weight: bold;
}
p.outcounter {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  position: relative; 
  color: #fff;
  margin-top: 1%;
  margin-left: 1%;
  font-weight: bold;
  display: inline;
}
p.incounter{
  font-family: 'Open Sans', serif;
  font-size: 1.313em;
  position: relative; 
  color: #fff;
  display: inline-block;
  margin-left: 0.3%;
  margin-top: 1%;
  font-weight: bold;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 8px 3px;
}
p.outcounter2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  position: relative; 
  color: #fff;
  margin-top: 1%;
  margin-left: 12%;
  font-weight: bold;
  display: inline;
}
div.button {
  width: 278px;
  height: 45px;
  background: #2aaa3d;
  border-radius: 10px;
  margin-top:19px;
  box-shadow: 0 -6px #008729 inset;
  transition: 0.3s;
  }
  div.button:hover {
  background: #0d881f;
  box-shadow: 0 -6px #095320 inset;
  }
/*Центр сайта*/
/*Кнопка и логин/регистрация*/
  a.onbutton {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.000em;
    color: #fff;
    margin-top: 4%;
    margin-left: 12%;
    text-decoration: none;
    position: relative;
    display: inline-block;
  }
a.logreg {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.000em;
  margin-top: 26px;
  left: 135px;
  color: #fff;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
a.logreg:hover {
  color: #e5e5e5;
  transition: 1s;
}
.fa-sign-in {
  margin-top: 26px;
  left: 130px;
  color: #fff;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
/*Кнопка и логин/регистрация*/
/*Анимация-Инфоблок*/
a.downloadprog {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.438em;
  color: #fff;
  border-bottom: 1px solid currentColor;
  position: relative;
  display: inline-block;
  font-weight: bold;
  margin-top: 2.5%;
  margin-left: 34%;
  text-decoration: none;
}
.info {
  width: 41px;
  height: 41px;
  background: #b9b9ba;
  border-radius: 10px;
  position: relative;
  top: -165px;
  opacity: 0.5;
  border: 1px solid #fff;
  display: inline-block;
  margin-top: 6.90%;
  margin-left: 56.5%;
  z-index: 2;
}
 .info:hover .info-tooltip{
   opacity: 1;     
 }
.info-tooltip{
  opacity: 0;
  position: absolute; top: 50%; left: 100%; 
  margin-left: 25px;
  text-align: center;
  width: 200px;
  padding: 10px;
  background: #2E2E2E;
  color: #fff;
  border: 2px solid #F2782A;
  border-radius: 10px;  
  transform: translateY(-50%);    
  transition: .5s;
}
.info-tooltip:before,
.info-tooltip:after{
  content: '';
  position: absolute; top: 55%; right: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}
.info-tooltip:before{  
  margin-top: -8px;  
  border-width: 8px 20px 8px 0;
  border-color: transparent #2E2E2E transparent transparent;
  z-index: 1;
}
.info-tooltip:after{  
  margin-top: -10px;  
  border-width: 10px 24px 10px 0;
  border-color: transparent #F2782A transparent transparent;
}
.fa-info {
  color: #fff;
  margin-top: 30%;
  margin-left: 40%;
  opacity: 1;
  z-index: 1;
}
/*Анимация-Инфоблок*/
/*Левая секция*/

.rightcontainer {
  width: 278px;
  height: 169px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 1px 0.2px #a3a3a3;
  margin-bottom: 10px;
  margin-left: 100%;
}
.rightcontainer2 {
  width: 278px;
  height: 655px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 1px 0.2px #a3a3a3;
  margin-left: 100%;
}
.rightcontainer2:hover {
  box-shadow: 0px -1px 4px 1px #a3a3a3;
  border-radius: 10px;  
  transition: 0.3s;
}
/*Левая секция*/
/*Центральная секция*/
.middlecontainer {
  width: 675px;
  height: 230px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 1px 0.2px #a3a3a3;
  margin-bottom: 1.4%;
  margin-left: 22.5%;
}
.middlecontainer:hover {
  box-shadow: 0px 2px 4px 3px #a3a3a3;
  border-radius: 10px;
  transition: 0.3s;
}
/*Центральная секция*/
/*Правая секция*/

/*Правая секция*/
/*Адаптив*/
@media screen and (max-width: 1024px) {
.header{height: 300px;}
.logo{display:block; margin-top:35px; margin-left: 25%;}
div.button{margin:10px auto 20px;}
a.onbutton{margin:10px auto 20px;}
p.incounter{font-size: 1em;}
p.outcounter{font-size: 1em;}
p.outcounter2{font-size: 1em;}
a.downloadprog{font-size: 1em;}
}
@media screen and (max-width: 1800px) {
div.button{width: 200px; height: 45px; margin-top: 6%; margin-left: 20%;}
a.onbutton{font-size: 0.9em; margin-top: 6%; margin-left: 3%;}
p.incounter{font-size: 0.70em;}
p.outcounter{font-size: 0.70em;}
p.outcounter2{font-size: 0.70em;}
a.downloadprog{font-size: 1em;}
p.inheader{font-size: 1.025em;}
a.downloadprog{margin-left: 22.5%; font-size: 1.6em;}
.info{margin-top: 9.5%; margin-right: 10%; }
}
@media screen and (max-width: 1366px) {
a.downloadprog{margin-left: 20.5%; font-size: 1.6em;}
.info{margin-top: 10%; margin-right: 8%; }
}

@media screen and (max-width: 1000px) {
.header{height: 300px;}
.header2{height: 170px;}
.logo{display:block; margin-top:35px; margin-left: 25%;}
a.logreg{top: 20%; left: 60%;}
div.button{width: 200px; height: 45px; margin-top: -7%; margin-left: 5%;}
.fa-sign-in{top: 20%; left: 59%;}
.orange{margin-top: -1.5%;}
p.inheader{margin-left: 10%;}
a.downloadprog{margin-left: 18.5%; font-size: 1em;}
p.incounter{left: 10%;}
p.outcounter{left: 10%;}
p.outcounter2{left: 10%;}
.info{margin-top: 45.3%; margin-left: 20%;}
}
/*Адаптив*/

Answer 1

HTML: 

<div class="left">
   <div class="col-md-2 col-xs-12 col-lg-2 col-sm-offset-2">
    <div class="rightcontainer">
    </div>
    <div class="rightcontainer2">
    </div>
  </div>
</div>
  <div class="middle">
   <div class="col-md-8 col-xs-12 col-lg-8">
    <div class="middlecontainer">
    </div>
    <div class="middlecontainer">
    </div>
    <div class="middlecontainer">
    </div>
   </div>
   </div>

CSS:

    .middlecontainer {
  width: 675px;
  height: 230px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 1px 0.2px #a3a3a3;
  margin-bottom: 1.4%;
}
.middlecontainer:hover {
  box-shadow: 0px 2px 3px 1px #a3a3a3;
  border-radius: 10px;
  transition: 0.3s;
}
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте mario.kiev.ua
ТОП-10
READ ALSO
не работает подключенный javascript файл
HTML

не работает подключенный javascript файл

Есть фрагмент кода на html:

 286
Не выбирается первый чекбокс. Почему?
HTML

Не выбирается первый чекбокс. Почему?

ЗдравствуйтеПодскажите, почему не выбирается первый ключевой чекбокс ?

 249
Python script. Excel таблицу перевести в html
HTML

Python script. Excel таблицу перевести в html

Доброго время суток,

 213
Блок меняющий свою ширину в зависимости от наличия левого блока меню
HTML

Блок меняющий свою ширину в зависимости от наличия левого блока меню

Есть общая обёртка, шириной 1024px, внутри есть блок левого меню, и горизонтальный блок ссылокСхематично всё можно представить так:

 202