如何为 div 添加 .hover 效果？答案

【问题标题】：How to add a .hover effect to a div?如何为 div 添加 .hover 效果？
【发布时间】：2015-04-22 19:09:59
【问题描述】：

我对编程很陌生，但我似乎无法使用 jquery 添加.hover 效果。

$(document).ready(function() {
  $('.mainr').hover(
    function() {
      $(this).addClass('.mainh')
    },
    function() {
      $(this).removeClass('mainh')
    });
});

.main {
  position: absolute;
  left: 20%;
  width: 60%;
  height: 500px;
  background-color: #D8D8D8;
  color: #ffffff;
}
.mainr {
  position: absolute;
  left: 0px;
  top: 50%;
  width: 23%;
  height: 50%;
  border-radius: 50%;
  background-color: #0B0B3B;
  float: left;
  color: #D8D8D8;
  text-align: center;
  vertical-align: 50%;
  font: 20px"Interstate", "Lucida Grande", Arial;
}
.mainh {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 23%;
  height: 50%;
  border-radius: 50%;
  background-color: #D8D8D8;
  float: left;
  color: #0B0B3B;
  text-align: center;
  vertical-align: 50%;
  font: 20px"Interstate", "Lucida Grande", Arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="mainr">Register</div>
</div>

你能告诉我如何将文本在 div 中居中（设置高度）

谢谢，

【问题讨论】：

使用 CSS :hover 有什么问题？
您不应在addClass 调用中添加点。请将$(this).addClass('.mainh')替换为$(this).addClass('mainh')并添加jQuery库
也许你可以使用 toggleClass('mainh') 而不是同时使用 addClass 和 removeClass

标签： jquery css hover

【解决方案1】：

如果你想继续使用 jQuery，你必须纠正你的错误并删除你的 addClass 调用中的 . ：

$('.mainr').hover( 
   function(){ $(this).addClass('mainh') },
   function(){ $(this).removeClass('mainh') }
);

jsFiddle

但最简单的解决方案是使用 @CodeLღver answer 中的 CSS

【讨论】：

【解决方案2】：

你忘了添加Jquery库，代码有一个错误。当你添加Class时，你不需要把.(dot)放在那个地方。实际代码是这样的

$(document).ready(function() {
  $('.mainr').hover(
    function() {$(this).addClass('mainh')},
    function() {$(this).removeClass('mainh')}
  );
});

【讨论】：

【解决方案3】：

你也可以通过 CSS 来实现。不需要JS：

试试这个：

.mainr:hover {
    position: absolute;
    left: 0%;
    top: 50%;
    width: 23%;
    height: 50%;
    border-radius: 50%;
    background-color: #D8D8D8;
    float:left;
    color: #0B0B3B;
    text-align:center;
    vertical-align:50%;
    font: 20px "Interstate","Lucida Grande",Arial;
}

将 .mainh 替换为 .mainr:hover，这将在没有任何 JS 的情况下为您工作。干杯！！！

已编辑：

在你的 JS 代码中有一个小错误：

$('.mainr').hover(
function() {
  $(this).addClass('mainh');
},
function() {
  $(this).removeClass('mainh');
}
);

试试上面的，这会奏效。

问题是$(this).addClass('.mainh'); 在这一行中你写了.mainh 应该是mainh。在 JS 中，如果您是类名，则无需将 . 提供给类，这意味着您在函数中使用它。 . 仅用于选择器。

【讨论】：

【解决方案4】：

首先，确保您已包含 jquery 库。

你可以尝试使用 toggleClass 代替 addClass 和 removeClass

$(document).ready(function(){
    $('.mainr').hover( 
       function(){ 
          $(this).toggleClass('mainh'); 
       }
    );
});

为了让 div 中的单词垂直居中，只需在 div css 中添加以下三行

display: flex;
flex-direction: column;
justify-content: center;

演示：http://jsfiddle.net/d5t2fLLh/1/

【讨论】：

【解决方案5】：

我已经更新了你的fiddle

要使用 jQuery 添加 CSS 悬停效果，您可以使用 $(this).css('PROPERTY','VALUE') }

【讨论】：

【解决方案6】：

为元素添加悬停状态非常简单。让我们以不透明度变化为例：

div
{
opacity:1.0;
}
div{
opacity:0.5
}

但是，如果我们想让悬停状态应用于除实际悬停的元素之外的所有内容，该怎么办？（例如其他相邻的兄弟 div）

让我们假设这个基本的 HTML：

<section class=parent>
<div></div>
<div></div>
<div></div> 
</section>

当父级处于悬停状态时，我们会将当前 CSS 属性应用到父级的所有子级。

.parent:hover > div {
  opacity: 0.5;
}

然后，当父元素悬停而单个 div 悬停时，我们将不透明度提高回来，从而得到我们正在寻找的最终效果。

.parent:hover > div {
  opacity: 1.0;
}

【讨论】：