Modification de la couleur d'une cellule dans un tableau html quand j'planer sur elle

J'ai regardé à travers toutes les réponses postées, mais je ne peux pas sembler obtenir ce code fonctionne correctement. Je suis en train d'essayer d'obtenir de la cellule individuelle à changer de couleur quand j'planer sur elle, mais je n'ai pas accès à l' .css avec le service que nous utilisons. Je suis contraint à l'abandon, le code HTML de la boîte que je peux coller mon code spécifique à l'élément que je suis en train de changer, mais pas la totalité .fichier css...juste cet élément.

Voici mon code. Toute aide dans l'obtention de l'arrière-plan pour modifier #ff0000 et le Texte pour modifier #000000 quand je roule sur la cellule serait grandement apprécié.

(Il est en fin de compte de mon intention d'ajouter un >a href pour chacune des cellules, mais je suis en train de faire une étape à la fois. Le >a href sera (je l'espère) ajout de la cellule sélectionnée pour un panier d'achat.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>

<style type="text/css">
body {
      background: #000;   
}
#wrap {
     margin: 0 auto; /* margin 0 auto will center that box in your document */
     width: 780px; /*size of your box*/
     background: #000;
     text-align: center; /* everything will be written in that box will be centered horizontally*/
     }
</style>
<div id="wrap">
  <table width="780">
     <tr>
        <td align="center">
<table border=1>
  <tbody>
    <!-- Results table headers -->
    <tr>
      <th>Messages Per Month</th>
      <th>1 Month Pricing</th>
      <th>3 Month Pricing</th>
      <th>12 Month Pricing</th>
    </tr>
    <tr>
      <td>500</td>
      <td>$14.95/Month</td>
      <td>$12.95/Month</td>
      <td>$9.95/Month</td>
    </tr>
    <tr>
      <td>1,000</td>
      <td>$24.95/Month</td>
      <td>$20.95/Month</td>
      <td>$17.95/Month</td>
    </tr>
    <tr>
      <td>1,500</td>
      <td>$37.95/Month</td>
      <td>$31.95/Month</td>
      <td>$26.95/Month</td>
    </tr>
    <tr>
      <td>2,000</td>
      <td>$49.95/Month</td>
      <td>$41.95/Month</td>
      <td>$35.95/Month</td>
    </tr>
    <tr>
      <td>2,500</td>
      <td>$62.95/Month</td>
      <td>$52.95/Month</td>
      <td>$44.95/Month</td>
    </tr>
    <tr>
      <td>5,000</td>
      <td>$119.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td>7,500</td>
      <td>$179.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td>10,000</td>
      <td>$219.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
        </td>
     </tr>
   </table>
</div>

Qu'entendez-vous par “je suis contraint de déposer le code HTML de la boîte que je peux coller mon code spécifique à l'élément, je suis l'évolution”? Voulez-vous dire que vous ne pouvez créer qu'un style attribut d'un élément HTML? Nous montrer un exemple de ce que vous faire, en termes de code HTML et CSS.

OriginalL'auteur user1564352 | 2012-07-30

html html-table

En CSS:

td:hover {
  background-color: #ff0000;
  color: #000000;
}

Ou vous pouvez utiliser JavaScript/jQuery:

$(document).ready(function() {
  $("td").hover(
    function() {
      $(this).css('background-color', '#ff0000');
      $(this).css('color', '#000000');
    }, 
    function() {
      $(this).css('background-color', 'none');
      $(this).css('color', 'black'); //or whatever your original color was
    }
  );
});

Le td: hover {background-color: #ff0000; color: #000000;} fait ce que je veux faire pour mon en-têtes de tableau...mais quid des cellules individuelles dans la table?
td: hover {background-color: #ff0000; color: #000000;} devrait être de travailler sur les cellules. Voulez-vous aussi que quelque chose arrive à les en-têtes lorsque vous passez la souris au-dessus d'eux?

OriginalL'auteur Jon

Envelopper les données de la cellule avec un div (class="cell_hvr") et un lien autour du contenu.

.cell_hvr {
    padding: 2px;
    width: 100%;
    height: 100%;
}
.cell_hvr a {
    display: block;
    text-decoration: none;
}
.cell_hvr a:hover {
    background-color: red;
}

<div class="cell_hvr"><a href="#" target="_blank"> (Your content) </a></div>

OriginalL'auteur reese_thebeast

0

CSS: td:hover, th:hover { background:#ff0000; color:#000; }

OriginalL'auteur Mark Pieszak - Trilon.io

Vous pouvez le faire en donnant à chaque cellule une classe

<td class="a">..</td>

et puis le style qu'il

<style>
  td.a { background-color:#ff0000; }
  td.a:hover { background-color:#000000; }
</style>

OriginalL'auteur RAuTeSH

0

Je cherchais la version JavaScript de la réponse à cette question. Mais, je ne suis pas à l'aide de JQuery..

J'ai
oCell = newRow.insertCell(); oCell.style.background = tintTest(myCounts[i]);

myCounts est juste un tableau de la détention d'un Int..

mais maintenant, je voulais juste ajouter le hover couleur d'arrière-plan de mon oCell avant de l'écraser en ligne et aller de l'avant avec la boucle......
J'ai donc trouvé le code ci-dessous comme étant la seule vérifié réponse dans un flux de 'ne peut pas être fait" .. juste ne sais pas si ce serait à même de m'aider.
```
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);
```
MODIFIER!!! Je viens de trouver mon problème (j'espère que la capture du code permet à la vôtre encore) j'ai essayé d'ajouter le hover en CSS et il n'est tout simplement pas pris en charge.

OriginalL'auteur Dill Pickle

Vous devez vous connecter pour publier un commentaire.