使用 JQUERY 功能悬停更改 DIV 颜色

Question

我正在尝试更改 <div> 的背景颜色，但它对我不起作用。不知道是什么问题
我使用了 bootstrap 中的 class 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>

使用 JQUERY 功能悬停更改 DIV 颜色

CHANGE DIV COLOR WITH JQUERY FUNCTION HOVER

jquery

hover

jquery-hover