เปลี่ยน: วางเมาส์เหนือคุณสมบัติ CSS ด้วย JavaScript

ฉันต้องหาวิธีเปลี่ยนคุณสมบัติ CSS: hover โดยใช้ JavaScript

ตัวอย่างเช่นสมมติว่าฉันมีโค้ด HTML นี้:

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

และโค้ด CSS ต่อไปนี้:

table td:hover {
background:#ff0000;
}

ฉันต้องการใช้ JavaScript เพื่อเปลี่ยน <td> คุณสมบัติโฮเวอร์เป็นพื้นหลัง: # 00ff00 รู้ว่าฉันสามารถเข้าถึงคุณสมบัติพื้นหลังสไตล์โดยใช้ JavaScript เป็น:

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

แต่ฉันไม่รู้ว่า JavaScript เทียบเท่ากับ: hover ฉันจะเปลี่ยนพื้นหลังโฮเวอร์ของ <td> เหล่านี้โดยใช้ JavaScript ได้อย่างไร

ความช่วยเหลือของคุณได้รับการชื่นชมอย่างมาก!

คลาสหลอกเช่น:hoverไม่เคยอ้างถึงองค์ประกอบ แต่เป็นองค์ประกอบใด ๆ ที่ตรงตามเงื่อนไขของกฎสไตล์ชีท คุณจำเป็นต้องแก้ไขกฎสไตล์ , ผนวกกฎใหม่หรือเพิ่มสไตล์ใหม่ที่มีใหม่:hoverกฎ

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

คุณไม่สามารถเปลี่ยนหรือแก้ไข:hoverตัวเลือกจริงผ่าน Javascript อย่างไรก็ตามคุณสามารถใช้mouseenterเพื่อเปลี่ยนสไตล์และย้อนกลับได้mouseleave(ขอบคุณ @ ไบรอัน)

สิ่งที่คุณทำได้คือเปลี่ยนคลาสของอ็อบเจ็กต์ของคุณและกำหนดคลาสสองคลาสที่มีคุณสมบัติโฮเวอร์ต่างกัน ตัวอย่างเช่น:

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

และสิ่งนี้ฉันพบใน: เปลี่ยนคลาสขององค์ประกอบด้วย 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");

หากตรงกับวัตถุประสงค์ของคุณคุณสามารถเพิ่มฟังก์ชันการวางเมาส์ได้โดยไม่ต้องใช้ css และใช้onmouseoverเหตุการณ์ในจาวาสคริปต์

นี่คือข้อมูลโค้ด

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

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

ขออภัยที่พบว่าหน้านี้ช้าเกินไป 7 ปี แต่นี่เป็นวิธีที่ง่ายกว่ามากในการแก้ปัญหานี้ (เปลี่ยนรูปแบบการวางเมาส์โดยพลการ):

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

คำถามเก่า ๆ ฉันคิดว่าฉันจะเพิ่มคำตอบที่ทันสมัยกว่านี้ ตอนนี้ตัวแปร CSS ได้รับการสนับสนุนอย่างกว้างขวางแล้วสามารถใช้เพื่อให้บรรลุสิ่งนี้ได้โดยไม่ต้องใช้เหตุการณ์ JS หรือ!important.

นำตัวอย่างของ OP:

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

ตอนนี้เราสามารถทำได้ใน 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);
}

และเพิ่มสถานะโฮเวอร์โดยใช้จาวาสคริปต์ดังนี้:

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

นี่คือตัวอย่างการทำงานhttps://codepen.io/ybentz/pen/RwPoeqb

ฉันขอแนะนำให้เปลี่ยน:hoverคุณสมบัติทั้งหมด:activeเมื่อคุณตรวจพบว่าอุปกรณ์รองรับการสัมผัส เพียงเรียกใช้ฟังก์ชันนี้เมื่อคุณทำเช่นนั้นtouch()

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

ฉันมีความต้องการนี้เพียงครั้งเดียวและสร้างไลบรารีขนาดเล็กสำหรับเก็บเอกสาร CSS

https://github.com/terotests/css

ด้วยการที่คุณสามารถระบุ

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

โดยใช้เทคนิคที่กล่าวมาข้างต้นและพยายามดูแลปัญหาข้ามเบราว์เซอร์ หากมีด้วยเหตุผลบางประการเบราว์เซอร์รุ่นเก่าเช่น IE9 จะ จำกัด จำนวนแท็ก STYLE เนื่องจากเบราว์เซอร์ IE รุ่นเก่ามีขีด จำกัด แปลก ๆ สำหรับจำนวนแท็ก STYLE ที่มีอยู่ในหน้า

นอกจากนี้ยัง จำกัด การเข้าชมแท็กด้วยการอัปเดตแท็กเป็นระยะ ๆ เท่านั้น นอกจากนี้ยังมีการสนับสนุนแบบ จำกัด สำหรับการสร้างคลาสแอนิเมชั่น

ประกาศตัวแปรส่วนกลาง:

var td

จากนั้นเลือก guiena pig ของคุณ<td>โดยใช้มันidหากคุณต้องการเปลี่ยนทั้งหมด

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

ทำให้ฟังก์ชั่นที่จะถูกเรียกและห่วงที่จะเปลี่ยนแปลงสิ่งที่คุณต้องการเป็นtd's

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

ไปที่แผ่นงาน CSS ของคุณ:

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

และด้วยเหตุนี้คุณจึงสามารถทำให้<td>แท็กทั้งหมดของคุณได้รับbackground-color: #00ff00;เมื่อวางเมาส์โดยเปลี่ยนความเหมาะสมของ css โดยตรง (สลับระหว่างคลาส css)

นี่ไม่ใช่การเพิ่ม CSS ลงในเซลล์ แต่ให้ผลแบบเดียวกัน ในขณะที่ให้ผลลัพธ์เช่นเดียวกับรุ่นอื่น ๆ ข้างต้นเวอร์ชันนี้ใช้งานง่ายกว่าสำหรับฉันเล็กน้อย แต่ฉันเป็นมือใหม่ดังนั้นควรใช้สิ่งที่คุ้มค่า:

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

สิ่งนี้ต้องมีการตั้งค่า Class สำหรับแต่ละเซลล์ที่คุณต้องการเน้นเป็น "hoverCell"

คุณสร้างตัวแปร CSS แล้วเปลี่ยนเป็น JS ได้

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

เพื่อเปลี่ยนเป็น JS ฉันได้สร้างฟังก์ชันเล็ก ๆ น้อย ๆ ที่มีประโยชน์เหล่านี้:

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

และ

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

คุณสามารถสร้างตัวแปร CSS ได้มากเท่าที่คุณต้องการและฉันไม่พบข้อบกพร่องใด ๆ ในฟังก์ชัน หลังจากนั้นสิ่งที่คุณต้องทำคือฝังลงใน CSS ของคุณ:

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

จากนั้นแบมวิธีแก้ปัญหาที่ต้องใช้ฟังก์ชัน CSS และ 2 JS!

คุณสามารถใช้เหตุการณ์ของเมาส์เพื่อควบคุมเช่นวางเมาส์เหนือ ตัวอย่างเช่นโค้ดต่อไปนี้ทำให้มองเห็นได้เมื่อคุณวางเมาส์เหนือองค์ประกอบนั้น

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

หากคุณใช้ html ux lang ที่มีน้ำหนักเบาโปรดดูตัวอย่างที่นี่เขียน:

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

โค้ดด้านบนดำเนินการเมตาแท็ก css: hover