在元素A的懸停上顯示元素B

-1

我試圖在懸停元素A（項目頁腳）時顯示元素B（份額）。有任何想法嗎？在元素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/

來源

2016-09-25 Lombi Lombera

的可能的複製[如何影響其他元素時一個div懸停]（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-是-徘徊） – Rob

-1

使用display屬性

.share{ 
    display:none; 
}  

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

來源

2016-09-25 12:16:12

嘗試添加該jQuery的，使用mouseover和mouseout。

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

來源

2016-09-25 13:02:36 svcputl3y7

在元素A的懸停上顯示元素B

回答

相關問題