使用 JQUERY 函数悬停更改 DIV 颜色答案

【问题标题】：CHANGE DIV COLOR WITH JQUERY FUNCTION HOVER使用 JQUERY 函数悬停更改 DIV 颜色
【发布时间】：2017-08-04 16:57:09
【问题描述】：

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

【问题讨论】：

BlueClass 的样式在哪里？你能在 stacksn-p 中重现这个问题吗？
为什么要在 jquery 中切换这个类，为什么不只是 css？ .text-center:hover{}
我想知道 option3 是否占据了整个 div 并且他只看到 option3 背景而不是容器背景

标签： jquery hover jquery-hover

【解决方案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>

【讨论】：

@RicardoRoa 这能有效回答您的问题吗？

【解决方案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>

【讨论】：