Ubah: arahkan properti CSS dengan JavaScript

Saya perlu menemukan cara untuk mengubah CSS: properti hover menggunakan JavaScript.

Misalnya, saya memiliki kode HTML ini:

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

Dan kode CSS berikut:

table td:hover {
background:#ff0000;
}

Saya ingin menggunakan JavaScript untuk mengubah properti hover <td> menjadi, katakanlah, background: # 00ff00. tahu saya bisa mengakses properti latar belakang gaya menggunakan JavaScript sebagai:

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

Tapi saya tidak tahu tentang JavaScript yang setara untuk: hover. Bagaimana cara mengubah <td>: latar belakang hover menggunakan JavaScript?

Bantuan Anda sangat kami hargai!

Kelas semu :hovertidak pernah merujuk ke elemen, tetapi ke elemen apa pun yang memenuhi ketentuan aturan stylesheet. Anda perlu mengedit aturan lembar gaya , menambahkan aturan baru , atau menambahkan lembar gaya baru yang menyertakan :hoveraturan baru .

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);

Anda tidak dapat mengubah atau mengubah :hoverpemilih sebenarnya melalui Javascript. Namun, Anda dapat menggunakan mouseenteruntuk mengubah gaya, dan mouseleavemengaktifkan kembali (terima kasih, @Bryan).

Yang dapat Anda lakukan adalah mengubah kelas objek Anda dan menentukan dua kelas dengan properti hover yang berbeda. Sebagai contoh:

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

Dan ini saya temukan di: Ubah kelas elemen dengan JavaScript

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");

Jika sesuai dengan tujuan Anda, Anda dapat menambahkan fungsionalitas hover tanpa menggunakan css dan menggunakan onmouseoveracara di javascript

Berikut ini potongan kode

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

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

Maaf menemukan halaman ini terlambat 7 tahun, tetapi berikut adalah cara yang jauh lebih sederhana untuk mengatasi masalah ini (mengubah gaya hover secara sewenang-wenang):

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');

Pertanyaan yang cukup lama jadi saya pikir saya akan menambahkan jawaban yang lebih modern. Sekarang variabel CSS didukung secara luas, mereka dapat digunakan untuk mencapai hal ini tanpa memerlukan event JS atau !important.

Mengambil contoh OP:

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

Sekarang kita dapat melakukan ini di CSS:

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

Dan tambahkan status hover menggunakan javascript seperti ini:

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

Berikut adalah contoh yang berfungsi https://codepen.io/ybentz/pen/RwPoeqb

Saya akan merekomendasikan untuk mengganti semua :hoverproperti :activeketika Anda mendeteksi bahwa perangkat mendukung sentuhan. Panggil saja fungsi ini saat Anda melakukannyatouch()

   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');
              }
            }
          }
        }
      }
    }

Saya memiliki kebutuhan ini sekali dan membuat perpustakaan kecil untuk, yang memelihara dokumen CSS

https://github.com/terotests/css

Dengan itu Anda bisa menyatakan

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

Ini menggunakan teknik yang disebutkan di atas dan juga mencoba menangani masalah lintas-browser. Jika karena alasan tertentu ada browser lama seperti IE9, itu akan membatasi jumlah tag GAYA, karena browser IE lama memiliki batas aneh untuk jumlah tag GAYA yang tersedia di halaman.

Selain itu, ini membatasi lalu lintas ke tag dengan memperbarui tag hanya secara berkala. Ada juga dukungan terbatas untuk membuat kelas animasi.

Deklarasikan var global:

var td

Kemudian pilih babi guiena Anda <td>mendapatkannya id, jika Anda ingin mengubah semuanya maka

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

Membuat fungsi dipicu dan loop untuk mengubah semua yang Anda inginkan td's

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

Pergi ke Lembar CSS Anda:

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

Dan hanya itu, dengan ini Anda dapat membuat semua <td>tag Anda mendapatkan background-color: #00ff00;ketika diarahkan dengan mengubah kepatutan cssnya secara langsung (beralih antar kelas css).

Ini sebenarnya tidak menambahkan CSS ke sel, tetapi memberikan efek yang sama. Meskipun memberikan hasil yang sama dengan yang lain di atas, versi ini sedikit lebih intuitif bagi saya, tetapi saya seorang pemula, jadi ambillah untuk apa nilainya:

$(".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;
    });
});

Ini membutuhkan pengaturan Kelas untuk setiap sel yang ingin Anda sorot ke "hoverCell".

Anda dapat membuat variabel CSS, lalu mengubahnya di JS.

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

untuk mengubahnya di JS, saya membuat fungsi-fungsi kecil yang berguna ini:

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

dan

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

Anda dapat membuat variabel CSS sebanyak yang Anda inginkan, dan saya belum menemukan bug dalam fungsinya; Setelah itu, yang harus Anda lakukan adalah menyematkannya di CSS Anda:

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

Dan kemudian bam, solusi yang hanya membutuhkan beberapa CSS dan 2 fungsi JS!

Anda dapat menggunakan peristiwa mouse untuk mengontrol seperti mengarahkan kursor. Misalnya, kode berikut akan terlihat saat Anda mengarahkan kursor ke elemen tersebut.

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

Jika Anda menggunakan html ringan ux lang, lihat di sini contoh , tulis:

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

Kode di atas menjalankan metatag css: hover.