添加:在悬停其他elem时，将悬停状态添加到不同elem

add :hover state to different elem on hover of other elem

本文关键字：添加 elem 悬停 状态 其他      更新时间：2023-09-26

所以，基本上我想检测用户何时悬停在一个元素（不同的div元素，不是父元素或兄弟元素）上，当悬停发生时，将:hover添加到我的另一个div元素中。我的其他div元素状态的:hover也通过css在下面。下面是通过在jQuery链接方法中手动添加css来实现这一点的一次尝试，但根本不起作用。

  $('.song-thumb .hover-play').hover(function(){
  $('section.suggestedAlbums img').css('transform', 'scale(1.2)');   
    //  },function(){
    // $('.flyout').hide();
  });

section.suggestedAlbums img:hover {
  transform: scale(1.2); z-index: 3; cursor: pointer;
}

我无法使:hover css状态正常工作，但以下是我可以做的

查看演示或查看下面的片段。

希望这能有所帮助。

$('.song-thumb .hover-play').on('mouseenter', function(e) {
  var elem = $('section.suggestedAlbums img');
  elem.trigger(e.type);
  elem.addClass('imgHover');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
  var elem = $('section.suggestedAlbums img');
  elem.trigger(e.type);
  elem.removeClass('imgHover');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
  count++;
  $('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
.song-thumb {
  background: aliceblue;
  padding: 1em;
}
.hover-play {
  cursor: pointer;
  color: green;
}
.imgHover {
  transform: scale(1.2);
  z-index: 3;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="song-thumb"><span class="hover-play">></span>
</div>
<section class="suggestedAlbums">
  <img src="http://placehold.it/350x150">
</section><label remove></label>

相关文章：