当我悬停另一个元素时，如何将悬停样式应用于div？

Question

当我将鼠标悬停在名称（.teste）中时，我想要的是激活悬停，但是我想用jQuery执行此操作。

＆＃13;

＆＃13;

li .caixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  box-sizing: border-box;
  height: 210px;
  width: 210px;
  position: relative;
}

li .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: .3s;
}

li .hover a,
span {
  display: none;
}

li .hover:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #72adde;
  opacity: 0.8;
}

＆＃13;

<li>
  <div class="caixa">
    <img src="" alt=""><i class="flaticon-people"></i>

    <div class="hover">
      <a class="branco" href="">Ver Perfil </a>
      <span class="branco"> |</span>
      <a class="preto" href=""> Editar</a>
    </div>
  </div>
  <p><a class="teste" href="">Leona Lima</a></p>
</li>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个 - 使用jquery的悬停方法：

＆＃13;

＆＃13;

$('.teste').hover(function() {
  $('.hover').addClass('active');
}, function() {
  $('.hover').removeClass('active');
});

＆＃13;

li .caixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  box-sizing: border-box;
  height: 210px;
  width: 210px;
  position: relative;
}

li .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: .3s;
}

li .hover a,
span {
  display: none;
}

li .hover:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #72adde;
  opacity: 0.8;
}

.hover.active {
  background-color: #72adde;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="caixa">
    <img src="" alt=""><i class="flaticon-people"></i>

    <div class="hover">
      <a class="branco" href="">Ver Perfil </a>
      <span class="branco"> |</span>
      <a class="preto" href=""> Editar</a>
    </div>
  </div>
  <p><a class="teste" href="">Leona Lima</a></p>
</li>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将鼠标悬停在链接上时可以切换css。

$('.teste').hover(function() { // mouseEnter callback
  // do whatever to box
}, function() { // mouseExit callback
  // undo whatever to box
});

更好的解决方案可能是让另一个类直接应用背景颜色。

// css
.changeBackground {
  background-color: #72adde;
  opacity: 0.8;
}

$('.teste, .hover').toggleClass('.changeBackground');

Answer 3

这可能会更好地处理CSS，就像你为.hover类所做的那样，但如果需要在JavaScript或jQuery中完成，你可以使用.hover() jQuery鼠标事件{{3 }}

$(".teste").hover(function() {
  $(this).css("color", "red"); // or anything you want to trigger on your hover event
});

Answer 4

没有任何JavaScript。只需更改＆＃34; li .hover：hover＆＃34; to＆＃34; li：hover .hover＆＃34;如果你不喜欢在整个li元素上设置它，只需创建一个容纳你想要悬停的元素的容器元素。

我总是推荐js方法之上的非js。但是如果你真的想要使用jquery选项，我推荐使用Aquila Sagitta改变类的解决方案。

＆＃13;

＆＃13;

li .caixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  box-sizing: border-box;
  height: 210px;
  width: 210px;
  position: relative;
}

li .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: .3s;
}

li .hover a,
span {
  display: none;
}

li:hover .hover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #72adde;
  opacity: 0.8;
}

.hover.active {
  background-color: #72adde;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="caixa">
    <img src="" alt=""><i class="flaticon-people"></i>

    <div class="hover">
      <a class="branco" href="">Ver Perfil </a>
      <span class="branco"> |</span>
      <a class="preto" href=""> Editar</a>
    </div>
  </div>
  <p><a class="teste" href="">Leona Lima</a></p>
</li>

＆＃13;

＆＃13;

＆＃13;