Ubah: arahkan properti CSS dengan JavaScript


93

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!

Jawaban:


110

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

1
Jika Anda mengambil rute ini, artikel ini juga dapat membantu di masa mendatang.
Achal Dave

14
: hover adalah pseudo-class , bukan pseudo-element. Elemen semu dimulai dengan titik dua ganda, misalnya :: setelah. / nitpick
Benji XVI

1
@Andi Tidak, karena stylevariabel dalam jawaban kennebec adalah elemen baru yang dibuat dalam kode dan tidak mengarah ke <style>tag yang ada di HTML.
Adaline Simonian

3
Mengapa tidak diketahui apakah styleelemen baru sudah memiliki styleSheet atau tidak?
GreenAsJade

1
Bagaimana Anda menemukan dan mengedit aturan lembar gaya saat ini, untuk mengubahnya? Ini menunjukkan penambahan aturan baru, tetapi bagaimana jika sudah ada aturan, dan itu hanya nilai yang diubah?
GreenAsJade

44

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


5
Sungguh TIDAK ada cara untuk mengubah: hover selector dengan JavaScript?
sissypants

5
Perhatikan bahwa Anda juga perlu mengikat mouseleaveuntuk membalikkan efeknya.

1
Saya telah menggunakan ini di proyek-proyek sebelumnya dan bahkan mencoba jawaban yang diterima baru-baru ini, tetapi yang ini selalu berlaku ketika menggunakan elemen hover / aktif dengan tombol berwarna. Hanya ingin mengucapkan terima kasih telah memposting ini sebagai opsi.
Jester

10

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

Tidak bisakah Anda menggunakan element.classList untuk menyetel ke kelas yang memiliki gaya hover yang diinginkan?
David Spector

6

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>

2
Ini akan mempertahankan gaya baru dan tidak akan kembali ke gaya sebelumnya!
Yahya

1
@Yahya - Anda dapat mengembalikan warna ini pada acara mouse out.
Andrei Volgin

6

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

4

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


3

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

2

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.


2

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


Saya baru saja menerapkan model ini di situs web taman bermain SoloLearn saya, periksa sendiri dan lihat cara kerjanya: code.sololearn.com/WEtMpJ0mwFAD/#js
Gabriel Barberini

2

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".


1

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!


0

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

-1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.