主页 / 问题 / 691323
Accepted
aloe
Asked:2020-07-12 19:35:08 +0000 UTC2020-07-12 19:35:08 +0000 UTC

悬停时另一个对象的外观

  • 772

你好。我正在使用以下代码：

@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与 class 一起显示showit。如何将带有类的单独 div 附加到每个图标，将鼠标悬停在绝对按下的图标上时会显示这些图标？我在整个页脚 ( .footer-social-icons) 中都使用了锚定，但我似乎无法弄清楚如何使用图标类来锚定单个 div 块。

PS 你可以使用 JS 或 JQUERY，这并不重要。

javascript

2 个回答

  1. Best Answer

    我会这样做：

    $('.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>

    • 2

  2. 每个图标块必须有自己的 showit1、showit2 类。

    每个图标都有自己的类。

    图标类的 :hover 必须有 + 块类。

    • 1

相关问题