0

Здравствуйте. Использую следующий код:

@import url('https://fonts.googleapis.com/css?family=Rajdhani:700');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.showit {
  position: absolute;
  left: 40%;
  top: 30%;
  transform: translateX(-50%) translateY(-50%);
  font-weight: bolder;
  font-family: 'Rajdhani', sans-serif;
  font-size: 30px;
  color: aliceblue;
  background: #232428;
  padding: 0 20px;
  border-left-width: 10px;
  display: none;
  transition: .5s;
}

ul {
  padding: 0;
  list-style: none;
}

.footer-social-icons {
  width: 450px;
  margin: 0 auto;
}

.social-icon {
  color: #fff;
  margin-left: 7px;
}

ul.social-icons {
  margin-top: 220px;
}

.social-icons li {
  vertical-align: top;
  display: inline;
  height: 100px;
}

.social-icons a {
  color: #fff;
  text-decoration: none;
}

.fa-vk {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.footer-social-icons:hover+.showit {
  display: block;
}

.fa-cloud {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-camera {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-battery-full {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-calendar {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}
<div class="footer-social-icons">
  <ul class="social-icons">
    <li>
      <a href="" class="social-icon"> <i class="fa fa-vk fa-2x"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-cloud fa-2x"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-camera fa-2x"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-battery-full fa-2x"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-calendar fa-2x"></i></a>
    </li>
  </ul>
</div>

<div class="showit">N</div>

Проблема состоит в следующем: При наведении на любую иконку, у меня показывается div с классом showit. Как я могу привязать к каждой иконке отдельный див с классом, который бы показывался при наведении над определенно нажатой иконке? Использовал привязку по всему футеру (.footer-social-icons), но никак не могу понять, как использовать класс иконок для привязки отдельных div блоков.

P.S можно использовать JS или JQUERY, это не принципиально важно.

2
  • У вас иконки и блок .showit физически не связаны, поэтому на чисто css этого сделать не получится
    – Cheg
    12 июл 2017 в 11:38
  • Кстати, спасибо что напомнили, я редактирую ответ. Мне не важно, можно и через js или jquery сделать.
    – aloe
    12 июл 2017 в 11:39

2 ответа 2

2

Я бы сделал этот так:

$('.social-icons i.fa').on('mouseover mouseleave', function() {
  $('.showit[data-showit="' + $(this).attr('data-showit') + '"]').toggleClass('active');
});
@import url('https://fonts.googleapis.com/css?family=Rajdhani:700');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.showit {
  position: absolute;
  left: 40%;
  top: 30%;
  transform: translateX(-50%) translateY(-50%);
  font-weight: bolder;
  font-family: 'Rajdhani', sans-serif;
  font-size: 30px;
  color: aliceblue;
  background: #232428;
  padding: 0 20px;
  border-left-width: 10px;
  display: none;
  transition: .5s;
}

.showit.active {
  display: block;
}

ul {
  padding: 0;
  list-style: none;
}

.footer-social-icons {
  width: 450px;
  margin: 0 auto;
}

.social-icon {
  color: #fff;
  margin-left: 7px;
}

ul.social-icons {
  margin-top: 220px;
}

.social-icons li {
  vertical-align: top;
  display: inline;
  height: 100px;
}

.social-icons a {
  color: #fff;
  text-decoration: none;
}

.fa-vk {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-cloud {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-camera {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-battery-full {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}

.fa-calendar {
  padding: 10px 14px;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #232426;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-social-icons">
  <ul class="social-icons">
    <li>
      <a href="" class="social-icon"> <i class="fa fa-vk fa-2x" data-showit="vk"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-cloud fa-2x" data-showit="cloud"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-camera fa-2x" data-showit="camera"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-battery-full fa-2x" data-showit="battery"></i></a>
    </li>
    <li>
      <a href="" class="social-icon"> <i class="fa fa-calendar fa-2x" data-showit="calendar"></i></a>
    </li>
  </ul>
</div>

<div class="showit" data-showit="vk">vk</div>
<div class="showit" data-showit="cloud">cloud</div>
<div class="showit" data-showit="camera">camera</div>
<div class="showit" data-showit="battery">battery</div>
<div class="showit" data-showit="calendar">calendar</div>

3
  • Спасибо большое! Каким способом я могу позиционировать появляющиеся элементы под определенную наведенную иконку? Сейчас они появляются строго в определенном месте.
    – aloe
    12 июл 2017 в 11:59
  • 1
    @aloe добавьте каждому блоку свой класс и прописывайте позицию для них в CSS. также вместо классов можете использовать такой селектор .showit[data-showit="vk"] и т.д.
    – Cheg
    12 июл 2017 в 12:01
  • Спасибо, все работает!
    – aloe
    12 июл 2017 в 12:03
1

У каждого блока для иконки должен быть свой класс showit1, showit2.

У каждой иконки свой класс.

:hover класса иконки должен иметь + класс блока.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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