Jquery 如何将.hover效果添加到div？

我对编程相当陌生，但我似乎无法使用jquery添加

.hover

效果

$（文档）.ready（函数（）{
$（'.main'）。悬停(
函数（）{
$（this.addClass（'.main'））
},
函数（）{
$（this.removeClass（'main'））
});
});
.main{
位置：绝对位置；
左：20%；
宽度：60%；
高度：500px；
背景色：#D8D8D8；
颜色：#ffffff；
}
梅因先生{
位置：绝对位置；
左：0px；
最高：50%；
宽度：23%；
身高：50%；
边界半径：50%；
背景色：#0B0B3B；
浮动：左；
颜色：#D8D8D8；
文本对齐：居中；
垂直对齐：50%；
字体：20px“州际”，“卢西达格兰德”，Arial；
}
梅恩先生{
位置：绝对位置；
左：0%；
最高：50%；
宽度：23%；
身高：50%；
边界半径：50%；
背景色：#D8D8D8；
浮动：左；
颜色：#0B0B3B；
文本对齐：居中；
垂直对齐：50%；
字体：20px“州际”，“卢西达格兰德”，Arial；
}

登记
您也可以通过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（'.main'）
在这一行中，您已经写入了
.mainh
，它应该是
mainh
。在JS中，如果您是类名，则不需要给类指定
，这意味着您正在函数中使用它<代码>

仅用于选择器。

我已更新了您的

---

为了使用jQuery添加CSS悬停效果，您可以执行

$（this）.CSS（'PROPERTY'，'VALUE'）}

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

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

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

让我们假设以下基本HTML：

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

然后，当父对象悬停且单个div悬停时，我们会将不透明度反弹，从而获得我们想要的最终效果

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

---

如果您想留在jQuery中，您必须纠正错误并删除

addClass

调用中的

：

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

---

但是最简单的解决方案是使用CSS，就像在

中一样。您忘记添加Jquery库，代码中有一个错误。当您添加类时，您不需要为此添加。（点）。实际代码如下

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

---

首先，确保已经包含jquery库

您可以尝试使用toggleClass而不是addClass和removeClass

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

要使div中的单词垂直居中，只需在div css中添加以下三行

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

---

演示：

使用CSS有什么问题：悬停？您不应该在

addClass

调用中添加点。请将

$（this）.addClass（'.main'）

替换为

$（this）.addClass（'main'）

，并添加jQuery库也许您可以使用toggleClass（'main'），而不是同时使用addClass和removeClass

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