Question

所以，基本上我想检测用户何时悬停在一个元素（不同的div元素，而不是父元素或兄弟元素）上，当发生悬停时，将:hover添加到我的其他div元件。我的:hover其他div元素状态也位于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>

添加：悬停状态到其他元素悬停时的不同元素

1 个答案: