javascript - div - w3schools title tag




Ändern: Hover CSS-Eigenschaften mit JavaScript (6)

Deklarieren Sie eine globale Variable:

var td

Wählen Sie dann Ihr Guiena-Schwein <td> , indem Sie es mit seiner id , wenn Sie alle dann ändern möchten

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

Mache eine Funktion, die ausgelöst werden soll und eine Schleife, um alle deine gewünschten td zu ändern

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

Gehe zu deinem CSS-Sheet:

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

Und das ist es, damit können Sie all Ihre <td> -Tags eine background-color: #00ff00; wenn es durch Ändern seiner CSS-Eigenschaft direkt verschoben wird (Umschalten zwischen CSS-Klassen).

Ich muss einen Weg finden, um CSS zu ändern: Hover-Eigenschaften mit JavaScript.

Angenommen, ich habe diesen HTML-Code:

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

Und der folgende CSS-Code:

table td:hover {
background:#ff0000;
}

Ich möchte JavaScript verwenden, um die <td> Hover-Eigenschaften zu ändern, sagen wir Hintergrund: # 00ff00. Ich weiß, dass ich mit JavaScript auf die Style-Hintergrund-Eigenschaft zugreifen kann:

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

Aber ich kenne keine JavaScript-Entsprechung für: Hover. Wie ändere ich diese <td>: Hover Hintergrund mit JavaScript?

Ihre Hilfe wird gerne in Anspruch genommen!


Dies ist nicht wirklich das Hinzufügen der CSS zur Zelle, aber gibt den gleichen Effekt. Diese Version bietet zwar dasselbe Ergebnis wie die anderen oben, ist aber etwas intuitiver für mich, aber ich bin ein Neuling, also nimm es für das, was es wert ist:

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

Dazu müssen Sie die Klasse für jede Zelle, die Sie markieren möchten, auf "HoverCell" setzen.


Ich würde empfehlen, alle :hover Eigenschaften zu ersetzen :active wenn Sie erkennen, dass das Gerät Touch unterstützt. Rufen Sie diese Funktion einfach auf, wenn Sie 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');
              }
            }
          }
        }
      }
    }

Pseudo-Klassen wie :hover beziehen sich niemals auf ein Element, sondern auf ein beliebiges Element, das die Bedingungen der Stylesheet-Regel erfüllt. Sie müssen die Stylesheet-Regel bearbeiten , eine neue Regel anhängen oder ein neues Stylesheet hinzufügen, das die new :hover Regel enthält.

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

Sie können die Klasse Ihres Objekts ändern und zwei Klassen mit unterschiedlichen Hover-Eigenschaften definieren. Beispielsweise:

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

Und das habe ich gefunden: Ändern Sie die Klasse eines Elements mit 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");

Wenn es Ihrem Zweck entspricht, können Sie die Hover-Funktionalität hinzufügen, ohne onmouseover zu verwenden und das Ereignis onmouseover in JavaScript zu verwenden

Hier ist ein Codeausschnitt

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

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






dhtml