如何为div添加.hover效果？

I am pretty new to programming but I cant seem to add an .hover effect using jquery.

我对编程很新，但似乎无法使用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>

and could you also tell mehow to center the text inside the div (setting the height)

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

Thanks,

谢谢，

6 个解决方案

#1

If you want to stay in jQuery you have to correct your mistake and remove the . on your addClass call :

如果你想留在jQuery中，你必须纠正你的错误并删除。在你的addClass调用：

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

jsFiddle

的jsfiddle

But the easiest solution is to use CSS like in @CodeLღver answer

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

#2

You Forgot to add the Jquery library and there is one mistake in code .When you addClass you need not to put the .(dot) for that.Actual code will be like this

你忘了添加Jquery库，代码中有一个错误。当你addClass时，你不需要为它添加。（点）。实际代码将是这样的

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

#3

You can do it by CSS too. No need of JS:

你也可以通过CSS来做到这一点。不需要JS：

Try this:

尝试这个：

.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;
}

Replace .mainh with .mainr:hover and this will work for you without any JS. cheers!!!

将.mainh替换为.mainr：hover，这对你来说没有任何JS。干杯！！！

EDITED:

编辑：

In your JS code there is minor mistake:

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

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

Try the above this will work.

尝试以上这将工作。

Problem was $(this).addClass('.mainh'); in this line you have write .mainh which should be mainh. In JS there is no need to give . to class if you are class name, means you are using it in function. . is used the selectors only.

问题是$（this）.addClass（'。mainh'）;在这一行你写的.mainh应该是mainh。在JS中没有必要给予。如果你是班级名称，则表示你正在使用它。。仅用于选择器。

#4

First of all, make sure you have include the jquery library.

首先，确保包含jquery库。

And you may try to use toggleClass instead of addClass and removeClass

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

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

And to vertical center the word inside the div, just add the following three line in the div css

并且在div中垂直居中这个词，只需在div css中添加以下三行

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

Demo: http://jsfiddle.net/d5t2fLLh/1/

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

#5

I have updated your fiddle

我已经更新了你的小提琴

In order to add CSS hover effect using jQuery you can do $(this).css('PROPERTY','VALUE') }

为了使用jQuery添加CSS悬停效果你可以做$（this）.css（'PROPERTY'，'VALUE'）}

#6

Adding a hover state to an element is durn easy. Let's use an opacity change as an example:

向元素添加悬停状态很容易。我们以不透明度变化为例：

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

But what if we want to have that hover state apply to everything but the element actually being hovered over? (e.g. other adjacent sibling divs)

但是，如果我们希望将悬停状态应用于除了实际上正在徘徊的元素之外的所有内容，该怎么办？（例如其他相邻的兄弟div）

Let's assume this basic HTML:

我们假设这个基本的HTML：

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

We'll apply the current CSS properties to all the children of the parent when the parent is in the hover state.

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

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

Then when the parent is hovered and the individual div is hovered, we bump the opacity back up, giving the final effect we are looking for.

然后，当父母徘徊并且个体div悬停时，我们将不透明度恢复，从而给出我们正在寻找的最终效果。

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

#1