JS / Jquery Hover css property değiştirme - R10.net
  • 25-06-2020, 10:22:59
    #1
    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
  • 28-06-2020, 20:57:48
    #2
    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
    Ucuz Etin Yahnisi
  • 29-06-2020, 14:24:39
    #3
    <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
    f12 candır...