ブートストラップを使用するウェルクラスのホバー効果

Question

私は3つの要素（p要素）を行クラス（それぞれcol-md-4）で持っています。今では、マウスを動かすたびに、各要素が個別のクラスを持つことができるように、ホバーにクラス（「ウェル」）を渡したいと思います。私はホバーすることなくそれを行うことができますが、ホバーで、私は苦労しています。誰でも助けることができますか？

Answer 1

使用CSS

私だけではCSSでこれを行うためにあなたをお勧めします。ユーザーがエレメントにマウスを置いたときに、pタグにwellの効果を持たせるだけです。ブートストラップwellのスタイル定義を引き出し、p:hoverルールで使用する場合は、Jqueryを使用してクラスを削除する方が良いでしょう。

wellのブートストラップ定義は以下のとおりです。

.well { 
    min-height: 20px; 
    padding: 19px; 
    margin-bottom: 20px; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
} 

あなたがしなければならないのは、あなたのページに

.YourMainDivClass p:hover { 
    min-height: 20px; 
    padding: 19px; 
    margin-bottom: 20px; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
} 

をこのカスタムCSSルールを追加することです。ここYourMainDivClassとのアイデアは、あなたが理解としてあなたpタグがdivの一部（でなければならないということです質問）、この効果をページ内のすべてのpタグで機能させたくありません。特定のグループにエフェクトを制限するために、セレクタに親のclassを使用しました。

これが役立ちますように！

Answer 2

ホバー上のクラスを適用するために使用jqueryの：

$('.myText').mouseenter(function(){ 
    $(this).addClass("well"); 
}); 

$('.myText').mouseleave(function(){ 
    $(this).removeClass("well"); 
}); 

Answer 3

あなたは単にjQueryのmouseenterとmouseleave機能を使用することができます。もちろん

$('p').mouseenter(function() { 
 
    $(this).addClass("well"); 
 
}); 
 
$('p').mouseleave(function() { 
 
    $(this).removeClass("well"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <p>Item</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p>Item</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p>Item</p> 
 
    </div> 
 
    </div> 
 

 
</div>

あなたはセレクタを変更する必要がありますあなたのニーズに合わせて