onmouseoutリセットCSS with JQuery

Question

CSSスタイルonmouseoverを変更するためにJQueryを使用していますが、onmouseoverを変更したCSSをmouseoutでリセットするのが難しいです。私は何をしたいのは、次のとおりです。

オリジナルスタイル： - ：グレースケール

ONMOUSEOVER "BTN1"： BTN2とbtn3のイメージ - "BTN1"、 "BTN2" と "btn3" の変化の背景赤 へ - "BTN2" と "btn3" の画像：色

ONMOUSEOUT：オリジナルスタイル

ONMOUSEOVER "BTN2"： - "BTN1" と赤 に "BTN2" 変更の背景 - の画像"btn2"：色

ONMOUSEOUT：オリジナルスタイル

ONMOUSEOVER "btn3"： - "btn3" のイメージ - "BTN1" と赤 に "btn3" の変化の背景：カラー

ONMOUSEOUT：オリジナルスタイル

$(function() { 
 
    $('#btn1').hover(function() { 
 
    $('#btn2, #btn3').css('background-color', 'red'); 
 
    $('#btn2, #btn3').css('color', 'white'); 
 
    $('#btn2, #btn3').css('filter', 'grayscale(0%)'); 
 
    $('#btn2, #btn3').css('-webkit-filter', 'grayscale(0%)'); 
 
    $('#btn2, #btn3').css('filter', 'none'); 
 
    }, function() { 
 
    // on mouseout, reset the background colour 
 
    $('#btn2, #btn3').css('background-color', ''); 
 
    $('#btn2, #btn3').css('color', '#b2b2b2'); 
 
    $('#btn2, #btn3').css('filter', 'grayscale(100%)'); 
 
    $('#btn2, #btn3').css('-webkit-filter', 'grayscale(100%)'); 
 
    $('#btn2, #btn3').css('filter', 'gray'); \t 
 
    $('#btn2, #btn3').css('-webkit-transition', 'all .2s ease'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('#btn2, #btn3').hover(function() { 
 
    $('#btn1').css('background-color', 'red'); 
 
    $('#btn1').css('color', 'white'); 
 
    }, function() { 
 
    // on mouseout, reset the background colour 
 
    $('#btn1').css('background-color', ''); 
 
    $('#btn1').css('color', '#b2b2b2'); 
 
    }); 
 
});

.btn { 
 
    background: #b2b2b2; 
 
    height: 90px; 
 
    width: 90px; 
 
    padding: 0; 
 
    font-weight: normal; 
 
    font-size: 10px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: gray; 
 
    cursor: pointer; 
 
    position:relative; 
 
    vertical-align: middle; 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
    filter: gray; 
 
    -webkit-transition: all .2s ease; 
 
    margin: 0; 
 
} 
 

 
.btn:hover { 
 
\t background: red; 
 
    \t color: white; 
 
    filter: grayscale(0%); 
 
    -webkit-filter: grayscale(0%); 
 
    filter: none; 
 
} 
 

 
    .btn1 { 
 
    padding: 0.5em 1.0em; 
 
    background: none; 
 
    border: none; 
 
    color: #b2b2b2; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    cursor: pointer; 
 
    margin: 0 auto; 
 
} 
 

 
.btn1:hover { 
 
    color: white; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btn1" class="btn1">social media</button> 
 

 
<button id="btn2" class="btn"><img src="https://images.vexels.com/media/users/3/137253/isolated/preview/90dd9f12fdd1eefb8c8976903944c026--cone-do--cone-do-facebook-by-vexels.png" width="80%"/></button> 
 

 
<button id="btn3" class="btn"><img src="https://images.vexels.com/media/users/3/137419/isolated/preview/b1a3fab214230557053ed1c4bf17b46c-logotipo-do--cone-do-twitter-by-vexels.png" width="80%"/></button>

Answer 1

私は追加して、クラスを削除]を使用して解決しました！

$("#btn1").hover(
 
    function() { 
 
    $(this).addClass("btn12"); 
 
    $('#btn2, #btn3').addClass("btn12"); 
 
    }, 
 
    function() { 
 
    $(this).removeClass("btn12"); 
 
    $('#btn2, #btn3').removeClass("btn12"); 
 
    } 
 
); 
 

 
$("#btn2, #btn3").hover(
 
    function() { 
 
    $(this).addClass("btn12"); 
 
    $('#btn1').addClass("btn12"); 
 
    }, 
 
    function() { 
 
    $(this).removeClass("btn12"); 
 
    $('#btn1').removeClass("btn12"); 
 
    } 
 
);

.btn { 
 
    background: #b2b2b2; 
 
    height: 90px; 
 
    width: 90px; 
 
    padding: 0; 
 
    font-weight: normal; 
 
    font-size: 10px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: gray; 
 
    cursor: pointer; 
 
    position:relative; 
 
    vertical-align: middle; 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
    filter: gray; 
 
    -webkit-transition: all .2s ease; 
 
    margin: 0; 
 
} 
 

 
.btn:hover { 
 
\t background: red; 
 
    \t color: white; 
 
    filter: grayscale(0%); 
 
    -webkit-filter: grayscale(0%); 
 
    filter: none; 
 
} 
 

 
    .btn1 { 
 
    padding: 0.5em 1.0em; 
 
    background: none; 
 
    border: none; 
 
    color: #b2b2b2; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    cursor: pointer; 
 
    margin: 0 auto; 
 
} 
 

 
.btn1:hover { 
 
    color: white; 
 
    background: red; 
 
} 
 

 
.btn12 { 
 
\t background: red; 
 
    \t color: white; 
 
    filter: grayscale(0%); 
 
    -webkit-filter: grayscale(0%); 
 
    filter: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btn1" class="btn1">social media</button> 
 

 
<button id="btn2" class="btn"><img src="https://images.vexels.com/media/users/3/137253/isolated/preview/90dd9f12fdd1eefb8c8976903944c026--cone-do--cone-do-facebook-by-vexels.png" width="80%"/></button> 
 

 
<button id="btn3" class="btn"><img src="https://images.vexels.com/media/users/3/137419/isolated/preview/b1a3fab214230557053ed1c4bf17b46c-logotipo-do--cone-do-twitter-by-vexels.png" width="80%"/></button>