ホバー上のテキストをJqueryまたはJavaScriptに置き換える

Question

JqueryまたはJSを使用してこれらのdivの1つをマウスオーバーすると、テキストとアイコンが消えて「もっと読む」が表示されるようにする方法を探しています。私はいくつかのガイドを見たことがありますが、実際に仕事全体を達成しているようには見えません.Div全体をクリアするのではなく、1行のテキストを削除し、マウスオーバー時に中央にある "Read More"マウスがホバーを抜けると、通常のテキストに戻ります。誰でも何か提案がありますか？ divは実際のページでは横向きですが、ここで縦に表示される理由はわかりません。

.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9; width:100%; display:inline-block;} 
 
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;} 
 
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;} 
 
.feature-box:hover{background:#208541 !important; color:#f6f6f6;} 
 
.feature-box.dark{background:#f6f6f6;}

<div class="feature-container" > 
 

 

 
\t \t <div class="feature-box-container feature-slider"> 
 
     \t <div class="feature-box"> 
 
      \t <i class="ion-ios-list-outline"></i> 
 
        <h4>Content</h4> 
 
        <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p> 
 

 
      </div> 
 
      <div class="feature-box dark"> 
 
      \t <i class="ion-ios-cog-outline"></i> 
 
        <h4>Customization</h4> 
 
        <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p> 
 
      </div> 
 
      <div class="feature-box"> 
 
      \t <i class="ion-help"></i> 
 
        <h4>Support</h4> 
 
        <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p> 
 
      </div> 
 
      <div class="feature-box dark"> 
 
      \t <i class="ion-social-usd-outline"></i> 
 
        <h4>Value</h4> 
 
        <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p> 
 
      </div> 
 
     </div> 
 

 

 
    </div>

Answer 1

.. 勿論それがある場合あなたが必要としない場合（あなただけの高さを修正するためにいくつかのCSSを使用することができます）、あなたはマウスイベント

$('.feature-box').on('mouseenter', function(){ 
 
    $(this).find('i, h4:not(.rm), p').css('visibility', 'hidden'); 
 
    $(this).find('h4.rm').css('visibility', 'visible'); 
 
}); 
 

 
$('.feature-box').on('mouseleave', function(){ 
 
    $(this).find('i, h4:not(.rm), p').css('visibility', 'visible'); 
 
    $(this).find('h4.rm').css('visibility', 'hidden'); 
 
});

.feature-container { 
 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); 
 
    position: relative; 
 
    z-index: 9; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
h4.rm{ visibility: hidden; } 
 
.feature-box { 
 
    background: #fff; 
 
    text-align: center; 
 
    padding: 40px 30px; 
 
    position: relative; 
 
    width: 25%; 
 
} 
 

 
.feature-box i { 
 
    font-size: 50px; 
 
    margin-bottom: 15px; 
 
    cursor: pointer; 
 
} 
 

 
.feature-box:hover { 
 
    background: #208541 !important; 
 
    color: #f6f6f6; 
 
} 
 

 
.feature-box.dark { 
 
    background: #f6f6f6; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="feature-container"> 
 

 

 
    <div class="feature-box-container feature-slider"> 
 
    <div class="feature-box"> 
 
     <i class="ion-ios-list-outline"></i> 
 
     <h4>Content</h4> 
 
     <h4 class="rm">Read more</h4> 
 
     <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p> 
 

 
    </div> 
 
    <div class="feature-box dark"> 
 
     <i class="ion-ios-cog-outline"></i> 
 
     <h4>Customization</h4> 
 
     <h4 class="rm">Read more</h4> 
 
     <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p> 
 
    </div> 
 
    <div class="feature-box"> 
 
     <i class="ion-help"></i> 
 
     <h4>Support</h4> 
 
     <h4 class="rm">Read more</h4> 
 
     <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p> 
 
    </div> 
 
    <div class="feature-box dark"> 
 
     <i class="ion-social-usd-outline"></i> 
 
     <h4>Value</h4> 
 
     <h4 class="rm">Read more</h4> 
 
     <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p> 
 
    </div> 
 
    </div> 
 

 

 
</div>

012上のテキストを表示し、非表示にする .hide()と .show()を使用することができます

Answer 2

これを達成するために私はあなたが唯一の解決策CSSを使用することをお勧めします。

新しいdivを追加してabsolutelyに配置し、フィーチャーボックスのホバーでそれを表示するだけです。

位置が機能するためには、機能ボックスがposition: relativeを持っているし、新しいdiv要素がz-index大きなを持っていなければならない、とtop: 0;あなたはそれはあなたが必要とするものである場合には以下を参照cssでそれを達成することができ

Answer 3

を設定しています。これは私が私が箱の高さを変更したり、変更したいなかったという理由だけで、テキストを非表示にする.css('visibility', 'hidden');を使用しています。..始めるためのお手伝いをする必要があり

.feature-container { 
 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); 
 
    position: relative; 
 
    z-index: 9; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 

 
.feature-box { 
 
    background: #fff; 
 
    text-align: center; 
 
    padding: 40px 30px; 
 
    position: relative; 
 
    width: 25%; 
 
    display: inline-block; 
 
} 
 

 
span.read-more { 
 
    display: none; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 0; 
 
} 
 

 
.feature-box:hover p { 
 
    display: none; 
 
} 
 

 
.feature-box:hover span.read-more { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.feature-box i { 
 
    font-size: 50px; 
 
    margin-bottom: 15px; 
 
    cursor: pointer; 
 
} 
 

 
.feature-box:hover { 
 
    background: #208541 !important; 
 
    color: #f6f6f6; 
 
} 
 

 
.feature-box.dark { 
 
    background: #f6f6f6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="feature-container"> 
 

 

 
    <div class="feature-box-container feature-slider"> 
 
    <div class="feature-box"> 
 
     <i class="ion-ios-list-outline"></i> 
 
     <h4>Content</h4> 
 
     <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p><span class="read-more">read more</span> 
 

 
    </div> 
 
    <div class="feature-box dark"> 
 
     <i class="ion-ios-cog-outline"></i> 
 
     <h4>Customization</h4> 
 
     <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p><span class="read-more">read more</span> 
 
    </div> 
 
    <div class="feature-box"> 
 
     <i class="ion-help"></i> 
 
     <h4>Support</h4> 
 
     <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p><span class="read-more">read more</span> 
 
    </div> 
 
    <div class="feature-box dark"> 
 
     <i class="ion-social-usd-outline"></i> 
 
     <h4>Value</h4> 
 
     <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p> 
 
     <span class="read-more">read more</span> 
 
    </div> 
 
    </div> 
 

 

 
</div>

Answer 4

あなたは動的デ・ボックス」を操作するために持っていけない場合、あなたはこのような余分なタグやCSSのカップル使用してそれを行うことができます：あなたが必要といけない場合

.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9; width:100%; display:inline-block;} 
 
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;display:inline-block;} 
 
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;} 
 
.feature-box:hover{background:#208541 !important; color:#f6f6f6;} 
 
.feature-box.dark{background:#f6f6f6;} 
 

 
.feature-box .mask{display:none;} 
 
.feature-box:hover .mask{background-color:#333;color:white;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;display:block;} 
 
.feature-box:hover .mask span{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);}

<div class="feature-container" > 
 

 

 
\t \t <div class="feature-box-container feature-slider"> 
 
     \t <div class="feature-box"> 
 
      \t <i class="ion-ios-list-outline"></i> 
 
        <h4>Content</h4> 
 
        <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p> 
 
        <a class="mask" href="#"><span>read more</span></a> 
 
      </div> 
 
      <div class="feature-box dark"> 
 
      \t <i class="ion-ios-cog-outline"></i> 
 
        <h4>Customization</h4> 
 
        <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p> 
 
        <a class="mask" href="#"><span>read more</span></a> 
 
      </div> 
 
      <div class="feature-box"> 
 
      \t <i class="ion-help"></i> 
 
        <h4>Support</h4> 
 
        <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p> 
 
        <a class="mask" href="#"><span>read more</span></a> 
 
      </div> 
 
      <div class="feature-box dark"> 
 
      \t <i class="ion-social-usd-outline"></i> 
 
        <h4>Value</h4> 
 
        <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p> 
 
        <a class="mask" href="#"><span>read more</span></a> 
 
      </div> 
 
     </div> 
 

 

 
    </div>

を「もっと読む」テキストのための派手なスタイルなら、.feature-box:hover::before{}を使用してテキストを追加し、それを.mask spanと同じように配置することができます。