ROLFNST

Изменение стилей div при наведении на кнопку меню

Recommended Posts

• Есть меню с выпадающим подменю;

• При наведении на кнопку в выпавшем подменю нужно изменить background в стороннем div;

• div и меню не связаны между собой;

/*Фрагмент меню*/
ul li .submenu .sub_1 + .bg a {
	background: url('../img/0.png') no-repeat;
}
ul li .submenu .sub_1:hover + .bg a {
	background: url('../img/1.png') no-repeat;
}
/*-Фрагмент меню*/

.headerbg{
	background: url('../img/Main.png') no-repeat;
	width: 1170px;
	height: 598px;
	position: relative;
}
.bg{
	width: 609px;
	height: 425px;
	position: absolute;
	top: 76px;
	left: 279px;
}

Это последний вариант который я попробовал.

Пишу методом научного тыка, не профессионал, со стилями работаю впервые.

Заранее премного благодарен каждому, кто уделил время этой теме.

Edited by ROLFNST

Share this post


Link to post
Share on other sites
5 часов назад, ROLFNST сказал:

div и меню не связаны между собой;

В этом случае без JS никак

Share this post


Link to post
Share on other sites

В CSS можно влиять на соседние элементы 

чтобы влиять на элементы лежащие выше используйте JS

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,298
    Total Members
    3,128
    Most Online
    Govt_sm80
    Newest Member
    Govt_sm80
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <li><a href="#"</a>Просто Текст</li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#" >Просто Текст</a></li>
                      </ul>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors