javascript - 添加:hover state to different elem on hover of other elem

Question

所以，基本上我想检测用户何时将鼠标悬停在一个元素上(不同的 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;
}

Answer 1

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

Check out the demo或者查看下面的代码片段。

希望这有帮助。

$('.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>