JS / Jquery Hover css property değiştirme

merhaba, js / jquery fark etmez yardıma ihtiyacım var.
Butona bastığımda belirli bazı classların background-color özelliklerinin hoverlarını kırmızıya çevirmek istiyorum.Başka bir butona basınca hoverı yeşil olacak, önceki butona yine basınca tekrar hover kırmızı olacak.

şöyle bir kod yazdım çalışmıyor:

document.querySelectorAll('.ulockd-btn-white:hover, .ulockd-btn-white:active, .ulockd-btn-white:focus') .style.setProperty("background-color", "red", "important");a

butona bazı class a sahip o elemanlara bir class daha ver, bu class ı beyaz yeşil olayını css ile halledersin
javascript de :hover :focus :after :before gibi seçiciler yok, hover zaten bir aksiyon

<div class="buton mavi">BUTON 1</div>
<div class="buton mavi">BUTON 2</div>
<div class="buton mavi">BUTON 3</div>



<div style="display:inline-block; clear:both; float:left; margin-top:30px;">

<div class="cevir b1">Butonların Hoverlarını Kırmızıya Çevir</div>
<div class="cevir b2">Butonların Hoverlarını Yeşile Çevir</div>
<div class="bilgi">Butonlara tıklayarak hoverları değiştirebilirsiniz....</div>
</div>

.buton{

height:30px;
float:left;
font-family:arial;
padding:2px 8px;
margin:3px;
border-radius:3px;
line-height:30px
}

.mavi{
background:#5785e3;
color:#fff;
}

.mavi:hover{
background:#3b64b6;
color:#fff;
cursor:pointer;
}

.kirmizi{
background:#5785e3;
color:#fff;
}

.kirmizi:hover{
background:#ff1010;
color:#fff;
cursor:pointer;
}

.yesil{
background:#5785e3;
color:#fff;
}

.yesil:hover{
background:#43b423;
color:#fff;
cursor:pointer;
}

.cevir{
background:#ffa900;
float:left;
margin-right:10px;
padding:3px 12px;
height:30px;
line-height:30px;
border-radius:3px;
color:#fff;
font-family:arial;
cursor:pointer;
}

.bilgi{
color:#888;
margin-top:10px;
display:inline-block;
font-family:tahoma;
font-size:13px;
}

$(".b1").click(function(){

$(".buton").removeClass("mavi yesil").addClass("kirmizi");
$(".bilgi").text("Hoverlar kırmızı oldu, test edin...");
});

$(".b2").click(function(){

$(".buton").removeClass("kirmizi mavi").addClass("yesil");
$(".bilgi").text("Hoverlar yeşil oldu, test edin...");
});

jQuery Dahil etmeyi unutmayın...

https://codepen.io/F12/pen/YzwrQvV