add：ホバー状態を他のelemのホバーで

Question

だから、基本的にユーザーが1つの要素に移動したときに検出したい（別のdiv要素、親要素でも兄弟でもない）ホバーが発生したときには:hover私の他のdiv要素。他のdiv要素状態の私の:hoverもCSS経由で下にあります。以下は、手動でそのCSSをjQueryチェーンメソッドに追加してこれを達成しようとする試みですが、全く機能しませんでした。

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