Thay đổi: di chuột thuộc tính CSS bằng JavaScript

Tôi cần tìm cách thay đổi thuộc tính CSS: hover bằng JavaScript.

Ví dụ: giả sử tôi có mã HTML này:

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

Và mã CSS sau:

table td:hover {
background:#ff0000;
}

Tôi muốn sử dụng JavaScript để thay đổi thuộc tính di chuột của <td> thành, chẳng hạn như background: # 00ff00. biết rằng tôi có thể truy cập thuộc tính nền kiểu bằng JavaScript như:

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

Nhưng tôi không biết một JavaScript tương đương cho: hover. Làm cách nào để thay đổi nền của <td>: hover này bằng JavaScript?

Giúp đỡ của bạn được đánh giá rất cao!

Các lớp giả :hoverkhông bao giờ tham chiếu đến một phần tử, nhưng đến bất kỳ phần tử nào thỏa mãn các điều kiện của quy tắc biểu định kiểu. Bạn cần chỉnh sửa quy tắc biểu định kiểu , thêm quy tắc mới hoặc thêm biểu định kiểu mới bao gồm :hoverquy tắc mới .

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

Bạn không thể thay đổi hoặc thay đổi :hoverbộ chọn thực tế thông qua Javascript. Tuy nhiên, bạn có thể sử dụng mouseenterđể thay đổi kiểu và hoàn nguyên trở lại mouseleave(cảm ơn, @Bryan).

Những gì bạn có thể làm là thay đổi lớp đối tượng của mình và xác định hai lớp với các thuộc tính di chuột khác nhau. Ví dụ:

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

Và điều này tôi đã tìm thấy trên: Thay đổi lớp của một phần tử bằng 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");

Nếu nó phù hợp với mục đích của bạn, bạn có thể thêm chức năng di chuột mà không cần sử dụng css và sử dụng onmouseoversự kiện trong javascript

Đây là một đoạn mã

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

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

Rất tiếc khi tìm thấy trang này quá muộn 7 năm, nhưng đây là một cách đơn giản hơn nhiều để giải quyết vấn đề này (thay đổi kiểu di chuột tùy ý):

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

Câu hỏi khá cũ nên tôi nghĩ mình sẽ thêm một câu trả lời hiện đại hơn. Giờ đây, các biến CSS đã được hỗ trợ rộng rãi, chúng có thể được sử dụng để đạt được điều này mà không cần các sự kiện JS hoặc !important.

Lấy ví dụ của OP:

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

Bây giờ chúng ta có thể làm điều này trong 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);
}

Và thêm trạng thái di chuột bằng cách sử dụng javascript như vậy:

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

Đây là một ví dụ hoạt động https://codepen.io/ybentz/pen/RwPoeqb

Tôi khuyên bạn nên thay thế tất cả các :hoverthuộc tính :activekhi bạn phát hiện ra rằng thiết bị hỗ trợ cảm ứng. Chỉ gọi hàm này khi bạn làm như vậytouch()

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

Tôi đã có nhu cầu này một lần và đã tạo một thư viện nhỏ để lưu trữ các tài liệu CSS

https://github.com/terotests/css

Với điều đó, bạn có thể nói

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

Nó sử dụng các kỹ thuật được đề cập ở trên và cũng cố gắng xử lý các vấn đề trên nhiều trình duyệt. Nếu vì lý do nào đó tồn tại một trình duyệt cũ như IE9, nó sẽ giới hạn số lượng thẻ STYLE, bởi vì trình duyệt IE cũ hơn có giới hạn kỳ lạ này đối với số lượng thẻ STYLE có trên trang.

Ngoài ra, nó giới hạn lưu lượng truy cập vào các thẻ bằng cách chỉ cập nhật các thẻ theo định kỳ. Ngoài ra còn có một hỗ trợ hạn chế cho việc tạo các lớp hoạt hình.

Khai báo một var toàn cục:

var td

Sau đó, chọn con lợn guiena của bạn <td>để lấy nó id, nếu bạn muốn thay đổi tất cả chúng thì

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

Tạo một chức năng để được kích hoạt và một vòng lặp để thay đổi tất cả tdcác

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

Đi tới Trang tính CSS của bạn:

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

Và đó là nó, với điều này, bạn có thể làm cho tất cả các <td>thẻ của bạn có được background-color: #00ff00;khi di chuột bằng cách thay đổi trực tiếp quyền sở hữu css của nó (chuyển đổi giữa các lớp css).

Đây không thực sự là thêm CSS vào ô, nhưng mang lại hiệu quả tương tự. Mặc dù cung cấp kết quả tương tự như những người khác ở trên, phiên bản này trực quan hơn một chút đối với tôi, nhưng tôi là người mới, vì vậy hãy sử dụng nó cho những gì nó đáng giá:

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

Điều này yêu cầu thiết lập Lớp cho mỗi ô bạn muốn đánh dấu thành "hoverCell".

Bạn có thể tạo một biến CSS và sau đó thay đổi nó trong JS.

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

để thay đổi nó trong JS, tôi đã tạo các hàm nhỏ tiện dụng sau:

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

và

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

Bạn có thể tạo bao nhiêu biến CSS tùy thích và tôi không tìm thấy bất kỳ lỗi nào trong các hàm; Sau đó, tất cả những gì bạn phải làm là nhúng nó vào CSS của bạn:

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

Và sau đó, một giải pháp chỉ yêu cầu một số CSS và 2 hàm JS!

Bạn có thể sử dụng các sự kiện chuột để điều khiển như di chuột. Ví dụ: mã sau sẽ hiển thị khi bạn di chuột qua phần tử đó.

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

Nếu bạn sử dụng html ux lang nhẹ, hãy xem ví dụ ở đây , viết:

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

Đoạn mã trên thực hiện thẻ meta css: hover.