在元素 A 悬停时显示元素 B答案

【问题标题】：Show element B on hover of element A在元素 A 悬停时显示元素 B
【发布时间】：2017-02-02 20:11:48
【问题描述】：

我试图在悬停元素 A（项目页脚）时显示元素 B（共享）。有什么想法吗？

body {
  margin: 0px;
}
.main-wrapper {
  max-width: 400px;
  height: 100%;
  margin: 0px auto;
}
.project-wrapper {
  display: flex;
  flex-direction: column;
  height: 320px;
  margin-top: 100px;
}
.project-header {
  display: flex;
  flex-direction: row;
  height: 40px;
  width: 100%
}
.column {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.title {
  width: 100px;
  height: 18px;
  border-radius: 3px;
  background-color: #533C86;
}
.owner {
  width: 85px;
  height: 14px;
  border-radius: 3px;
  background-color: #533C86;
  margin-top: 8px;
}
.more {
  height: 40px;
  width: 40px;
  background-color: #F4F4F4;
  margin-left: auto;
  border-radius: 100px;
}
.project-body {
  width: 400px;
  height: 265px;
  background-color: #47C7C3;
  border-radius: 3px;
  margin-top: 10px;
  display: inherit;
}
.project-footer {
  width: 400px;
  height: 60px;
  background-color: #31A8A4;
  margin-top: auto;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: inherit;
  flex-direction: row;
  transition: background-color 0.2s ease-out, padding 0.1s ease-out;
  opacity: 1;
}
.project-footer:hover {
  cursor: pointer;
  background-color: #B5B5B5;
  padding: 30px;
}
.share {
  height: 40px;
  width: 40px;
  background-color: #F4F4F4;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 100px;
  margin-right: 10px;
  margin-left: auto;
  transition: width 0.1s ease-out, opacity 0.1s linear;
}
.share:hover {
  width: 100px;
}

<body>
  <div class="main-wrapper">
    <div class="project-wrapper">
      <div class="project-header">
        <div class="column">
          <div class="title"></div>
          <div class="owner"></div>
        </div>
        <div class="column">
          <div class="more icon"></div>
        </div>
      </div>
      <div class="project-body">
        <div class="badges">
          <div class="badgde"></div>
          <div class="badgde"></div>
        </div>
        <div class="project-footer">
          <div class="column">
            <div class="user"></div>
            <div class="user"></div>
            <div class="user"></div>
          </div>
          <div class="column">
            <div class="share icon"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

http://jsfiddle.net/lombi/xx8n8dux/

【问题讨论】：

How to affect other elements when a div is hovered的可能重复

标签： css hover frontend transition

【解决方案1】：

尝试添加这个 jQuery，使用 mouseover 和 mouseout。

<script>
    $(document).ready(function(e){
        $(".project-footer").mouseover(function(){
            $(".share").width(100);
        });
        $(".project-footer").mouseout(function(){
            $(".share").width(40);
        }); 
    });
</script>

【讨论】：

【解决方案2】：

使用显示属性

.share{
   display:none;
}    

.project-footer:hover .share{
   display:block;   
}

【讨论】：