JQUERY FUNCTION HOVERを使用して色を変更する

Question

<div>の背景色を変更しようとしていますが、私のためには機能しません。私は問題が何であるか分からない。
ブートストラップからクラスcol-md-2を使用していますが、何か問題があります。ここで

は、私のコードのサンプルです：

$(document).ready(function() { 
 
    $(".text-center").hover(function() { 
 
     $(this).addClass("BlueClass"); 
 
    }, function() { 
 
     $(this).removeClass("BlueClass"); 
 
    }); 
 
});

#interiormenu3 { 
 
    width: 150px; 
 
    height: 43px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 65px; 
 
    border-radius: 25px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
} 
 

 
.opcion3 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Oswald"; 
 
    font-weight: bold; 
 
} 
 

 
.BlueClass { 
 
    line-height: -35px; 
 
    color: white; 
 
    font-family: "Oswald"; 
 
    font-weight: bold; 
 
    width: 150px; 
 
    height: 43px; 
 
    background-color: #FFFFFF; 
 
    position: relative; 
 
    top: 35px; 
 
    border-radius: 25px; 
 
    border-color: #2A5EC7; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="col-md-2" id="interiormenu3"> 
 
    <div class="text-center"> 
 
     <a href="#" class="opcion3">Portafolio</a> 
 
    </div> 
 
</div>

Answer 1

私はちょうどここに推測しています。簡単なメニュー項目のホバーをしたいと思うようです。私はこれにjQueryを使用しません。あなたはCSSだけでそれをすることができます。

#interiormenu3 { 
 
    width: 150px; 
 
    height: 43px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 65px; 
 
    border-radius: 25px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
} 
 

 
.text-center { 
 
    text-align: center; 
 
} 
 

 
opcion3 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Oswald"; 
 
    font-weight: bold; 
 
} 
 

 
.text-center:hover { 
 
    line-height: -35px; 
 
    color: white; 
 
    font-family: "Oswald"; 
 
    font-weight: bold; 
 
    width: 150px; 
 
    height: 43px; 
 
    background-color: #FFFFFF; 
 
    border-radius: 25px; 
 
    border-color: #2A5EC7; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    margin-top: -3px; 
 
    margin-left: -3px; 
 
}

<div class="col-md-2" id="interiormenu3"> 
 
    <div class="text-center"> 
 
    <a href="#" class="opcion3">Portafolio</a> 
 
    </div> 
 
</div>

Answer 2

$(document).ready(function() { 
 
    $(".text-center").on('mouseover',function() { 
 
     $(this).parent().addClass('interiormenu3red');  
 
    }); 
 
    $(".text-center").on('mouseleave',function() { 
 
     $(this).parent().removeClass('interiormenu3red');  
 
    }) 
 
});

#interiormenu3{ 
 
width: 150px; 
 
    height: 43px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top:65px; 
 
    border-radius:25px; 
 
    border-color:#737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
} 
 
.interiormenu3red{ 
 
    background-color: red!important; 
 
} 
 
opcion3{ 
 
    line-height: 35px; 
 
    color:white; 
 
    font-family: "Oswald"; 
 
    font-weight: bold; 
 

 

 
} 
 

 
.text-center { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align:center; 
 
    padding-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-2" id="interiormenu3" > 
 
       <div class="text-center" > 
 
       <a href="#" class="opcion3">Portafolio</a> 
 
        </div> 
 
       </div>