Div出现在不同div

时间：2015-05-22 19:59:28

标签： javascript jquery html css animation

我想知道当#screamer悬停时，是否可以让＃text-1以opacity:0;到opacity:1;的动画显示？

我希望在{b}悬停在过渡期间，#text-1显示在#screamer下，div b是CSS圈（边框半径为50％，宽度为60px，高度为60px）与背景图像。框颜色的不透明度为0.

以下是相关代码：

＆＃13;
＆＃13; 
/* ABOUT */

#aboutus {
  text-align: center;
  margin: 0px;
  margin-top: -35px;
  font-weight: 500;
}
/* MANAGERS */

#managers-head {
  font-weight: 500;
}
#importantpeople {
  text-align: center;
}
#importantpeopletxt {
  text-align: center;
}
#manager-1 {
  font-weight: 500;
  float: left;
  margin-left: -2px;
  display: inline-block;
  text-align: left;
  margin-left: 1px;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
  display: inline-block;
  text-align: center;
  margin-right: 6px;
}
#manager-3 {
  font-weight: 500;
  float: right;
  margin-right: 10px;
  display: inline-block;
  text-align: left;
  padding-right: 6px;
}
#important {
  width: 100%;
  height: 300px;
  background-color: #ff9900;
  position: absolute;
  z-index: -1;
  top: 430px;
}
#screamer {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
  margin-left: 3%;
  display: inline-block;
}
#kinzu {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  display: inline-block;
}
#swezii {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: right;
  margin-right: 3%;
  display: inline-block;
}
#text-1 {
  text-align: left;
  padding-right: 150px;
  float: left;
}
#text-2 {
  text-align: center;
  padding-right: 150px;
}
#text-3 {
  text-align: right;
  padding-right: 150px;
  float: right;
}
＆＃13; 
<div class="container">
  <div class="row" id="importantpeople">
    <div class="twelve columns">
      <h4 id="managers-head">Our Managers</h4>
    </div>
    <div class="row" id="importantpeople">
      <div class="one-third.column" id="screamer">
      </div>
      <div class="one-third.column" id="kinzu">
      </div>
      <div class="one-third.column" id="swezii">
      </div>
    </div>
    <div class="row" id="importantpeopletxt">
      <h6 id="manager-1">Screamer</h6>
      <h6 id="manager-2">KINZU</h6>
      <h6 id="manager-3">Swezii</h6>
      <p id="text-1">Just a guy chilling on his computer creating works of art for people</p>
      <p id="text-2">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
      <p id="text-3">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

  

我想知道是否可以让＃text-1出现   不透明度的动画：0;不透明度：1;什么时候#screamer徘徊？

由于#screamer和#manager-1不是兄弟姐妹或亲子，因此您需要使用JavaScript。

你已经标记了jQuery，所以这里有一个快速而又脏的：

$('#screamer').hover(
  function() {
    $('#text-1').animate({opacity: 1});
  },
  function() {
    $('#text-1').animate({opacity: 0});
  }
);

<强> CSS 

#text-1 {
  opacity: 0;
}

<强>段 

$('#screamer').hover(
  function() {
    $('#text-1').animate({opacity: 1});
  },
  function() {
    $('#text-1').animate({opacity: 0});
  }
);
/* ABOUT */

#aboutus {
  text-align: center;
  margin: 0px;
  margin-top: -35px;
  font-weight: 500;
}
/* MANAGERS */

#managers-head {
  font-weight: 500;
}
#importantpeople {
  text-align: center;
}
#importantpeopletxt {
  text-align: center;
}
#manager-1 {
  font-weight: 500;
  float: left;
  margin-left: -2px;
  display: inline-block;
  text-align: left;
  margin-left: 1px;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
  display: inline-block;
  text-align: center;
  margin-right: 6px;
}
#manager-3 {
  font-weight: 500;
  float: right;
  margin-right: 10px;
  display: inline-block;
  text-align: left;
  padding-right: 6px;
}
#important {
  width: 100%;
  height: 300px;
  background-color: #ff9900;
  position: absolute;
  z-index: -1;
  top: 430px;
}
#screamer {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url("http://placehold.it/200x100");
  background-size: 100%;
  float: left;
  margin-left: 3%;
  display: inline-block;
}
#kinzu {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url("http://placehold.it/200x100");
  background-size: 100%;
  display: inline-block;
}
#swezii {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url("http://placehold.it/200x100");
  background-size: 100%;
  float: right;
  margin-right: 3%;
  display: inline-block;
}
#text-1 {
  text-align: left;
  padding-right: 150px;
  float: left;
}
#text-2 {
  text-align: center;
  padding-right: 150px;
}
#text-3 {
  text-align: right;
  padding-right: 150px;
  float: right;
}

#text-1 {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="importantpeople">
    <div class="twelve columns">
      <h4 id="managers-head">Our Managers</h4>
    </div>
    <div class="row" id="importantpeople">
      <div class="one-third.column" id="screamer">
      </div>
      <div class="one-third.column" id="kinzu">
      </div>
      <div class="one-third.column" id="swezii">
      </div>
    </div>
    <div class="row" id="importantpeopletxt">
      <h6 id="manager-1">Screamer</h6>
      <h6 id="manager-2">KINZU</h6>
      <h6 id="manager-3">Swezii</h6>
      <p id="text-1">Just a guy chilling on his computer creating works of art for people</p>
      <p id="text-2">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
      <p id="text-3">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
    </div>
  </div>

答案 1 :(得分：1)

未来观众的香草解决方案。不需要jQuery。

（Demo）

CSS 

#text-1 {
     opacity: 0;
     transition: opacity 1s linear;
}

的Javascript 

(function () {
    "use strict";
    var screamer = document.getElementById('screamer');
    screamer.addEventListener('mouseover', function () {
        var text1 = document.getElementById('text-1');
        text1.style.opacity = '1';
    }, false);
    screamer.addEventListener('mouseout', function () {
        var text1 = document.getElementById('text-1');
        text1.style.opacity = '0';
    }, false);
})();

编辑：

如果您希望能够为每个“经理”切换一段文字，您可以执行以下操作。注意我已经在这里修改了HTML和CSS，所以你必须使用HTML和CSS以及Javascript

（Demo）

相关问题
最新问题