Değişiklik: CSS özelliklerini JavaScript ile üzerine getirin

CSS: hover özelliklerini JavaScript kullanarak değiştirmenin bir yolunu bulmam gerekiyor.

Örneğin, şu HTML koduna sahip olduğumu varsayalım:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

Ve aşağıdaki CSS kodu:

table td:hover {
background:#ff0000;
}

<td> üzerine gelme özelliklerini arka plan olarak değiştirmek için JavaScript kullanmak istiyorum: # 00ff00. JavaScript kullanarak stil arka plan özelliğine şu şekilde erişebileceğimi bilin:

document.getElementsByTagName("td").style.background="#00ff00";

Ancak JavaScript eşdeğeri bilmiyorum: hover. JavaScript kullanarak bu <td> 'nin: fareyle üzerine gelme arka planını nasıl değiştirebilirim?

Yardımınız için çok minnettarım!

Sözde sınıflar :hoverhiçbir zaman bir öğeye değil, stil sayfası kuralının koşullarını karşılayan herhangi bir öğeye gönderme yapar. Sen gerek stil kuralını düzenlemek , ekleme yeni bir kural veya yeni içeren yeni stil eklemek :hoverkuralı.

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

Sen olamaz değiştirmek veya fiili değiştirmek :hoverJavascript aracılığıyla seçici. Bununla birlikte, mouseenterstilini değiştirmek ve geri dönmek için kullanabilirsiniz mouseleave(teşekkürler, @Bryan).

Yapabilecekleriniz, nesnenizin sınıfını değiştirmek ve farklı vurgulu özelliklere sahip iki sınıf tanımlamaktır. Örneğin:

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

Ve şunu buldum: JavaScript ile bir elemanın sınıfını değiştirin

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");

Amacınıza uygunsa, css kullanmadan ve onmouseoverjavascript'teki olayı kullanmadan fareyle üzerine gelme işlevini ekleyebilirsiniz.

İşte bir kod parçacığı

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>

Bu sayfayı 7 yıl geç bulduğum için üzgünüz, ancak işte bu sorunu çözmenin çok daha basit bir yolu (isteğe bağlı olarak üzerine gelme stillerini değiştirmek):

HTML:

<button id=Button>Button Title</button>

CSS:

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

JavaScript:

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');

Oldukça eski bir soru bu yüzden daha modern bir cevap ekleyeceğimi düşündüm. Artık CSS değişkenleri yaygın olarak desteklendiğinden, JS olaylarına veya !important.

OP örneğini ele alırsak:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

Şimdi bunu CSS'de yapabiliriz:

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

Ve javascript kullanarak fareyle üzerine gelme durumunu ekleyin:

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

İşte çalışan bir örnek https://codepen.io/ybentz/pen/RwPoeqb

Cihazın dokunmayı desteklediğini tespit ettiğinizde tüm :hoverözellikleri değiştirmenizi tavsiye ederim :active. Bunu yaptığınızda sadece bu işlevi çağırıntouch()

   function touch() {
      if ('ontouchstart' in document.documentElement) {
        for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
          var sheet = document.styleSheets[sheetI];
          if (sheet.cssRules) {
            for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
              var rule = sheet.cssRules[ruleI];

              if (rule.selectorText) {
                rule.selectorText = rule.selectorText.replace(':hover', ':active');
              }
            }
          }
        }
      }
    }

Bu ihtiyacı bir kez yaşadım ve CSS belgelerini koruyan küçük bir kitaplık oluşturdum

https://github.com/terotests/css

Bununla belirtebilirsin

css().bind("TD:hover", {
        "background" : "00ff00"
    });

Yukarıda belirtilen teknikleri kullanır ve ayrıca tarayıcılar arası sorunları gidermeye çalışır. Herhangi bir nedenle IE9 gibi eski bir tarayıcı varsa, bu STYLE etiketlerinin sayısını sınırlayacaktır, çünkü eski IE tarayıcısı sayfada bulunan STYLE etiketlerinin sayısı için bu garip sınıra sahipti.

Ayrıca, etiketleri yalnızca periyodik olarak güncelleyerek etiketlere olan trafiği sınırlar. Animasyon sınıfları oluşturmak için sınırlı bir destek de vardır.

Global bir değişken bildirin:

var td

Sonra , hepsini değiştirmek istiyorsanız, guiena domuzunuzu <td>ona göre seçin, o idzaman

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

Tetiklenecek bir fonksiyon ve istediğiniz tüm değiştirmek için bir döngü yapın td's

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

CSS Sayfanıza gidin:

.yournewclass:hover { background-color: #00ff00; }

Ve işte bu, bununla, doğrudan css özelliğini değiştirerek (css sınıfları arasında geçiş yaparak) üzerine gelindiğinde tüm <td>etiketlerinizin bir almasını sağlayabilirsiniz background-color: #00ff00;.

Bu aslında CSS'yi hücreye eklemek değildir, ancak aynı etkiyi verir. Yukarıdaki diğerleriyle aynı sonucu sağlarken, bu sürüm benim için biraz daha sezgisel, ancak ben bir acemiyim, bu yüzden değeri ne olursa olsun alın:

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

Bu, vurgulamak istediğiniz her bir hücre için Sınıfı "hoverCell" olarak ayarlamayı gerektirir.

Bir CSS değişkeni oluşturabilir ve ardından bunu JS'de değiştirebilirsiniz.

:root {
  --variableName: (variableValue);
}

JS'de değiştirmek için şu kullanışlı küçük işlevleri yaptım:

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

ve

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

İstediğiniz kadar CSS değişkeni oluşturabilirsiniz ve işlevlerde herhangi bir hata bulamadım; Bundan sonra, tek yapmanız gereken onu CSS'nize yerleştirmek:

table td:hover {
  background: var(--variableName);
}

Ve sonra bam, sadece bazı CSS ve 2 JS işlevi gerektiren bir çözüm!

Fareyle üzerine gelme gibi kontrol etmek için fare olaylarını kullanabilirsiniz. Örneğin, aşağıdaki kod, o öğenin üzerine geldiğinizde görünür hale geliyor.

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

Hafif html ux lang kullanıyorsanız, buraya bir örnek bakın , şunu yazın:

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

Yukarıdaki kod css: hover meta etiketini gerçekleştirir.