Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

谢谢，

Answer 1

你也可以通过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中，如果您是类名，则无需将.赋予类，这意味着您在函数中使用它。 .仅用于选择器。

Answer 2

如果你想留在jQuery中，你必须纠正错误并删除.电话上的addClass：

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

jsFiddle

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

中的CSS

Answer 3

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

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

Answer 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/

Answer 5

我已更新您的fiddle

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

Answer 6

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

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

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

我们假设这个基本的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;
}

如何为div添加.hover效果？

6 个答案: