テーブル内のCSSでテキストの色を変更できません

Question

<div>タグに色のスタイルを追加したいと思います。

これだけ作品プロパティを使用して：

`background-color`: orange; 

しかし、私は、それはテキストだけではなく、背景を変更する必要がありますしたいです。このよう

：このデモで

`color`: orange; 

は、Javascriptがまだ作業は必要ありません。で、ここで

私のデモ：

function firefoxFix() { 
 
    
 
    if (/firefox/.test(window.navigator.userAgent.toLowerCase())) { 
 
     
 
     var tds = document.getElementsByTagName('td'); 
 
     
 
     for(var index = 0; index < tds.length; index++) { 
 
      tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';      
 
     }; 
 
     
 
     var style = '<style>' 
 
      + 'td { padding: 0 !important; }' 
 
      + 'td:hover::before, td:hover::after { background-color: transparent !important; }' 
 
      + '</style>'; 
 
     document.head.insertAdjacentHTML('beforeEnd', style); 
 
     
 
    }; 
 
    
 
}; 
 

 
firefoxFix();

table { 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
    overflow: hidden; 
 
    z-index: 1; 
 
} 
 

 
td, th, .ff-fix { 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
td:hover::after, 
 
.ff-fix:hover::after { 
 
    background-color: orange; 
 
    content: '\00a0'; 
 
    height: 10000px;  
 
    left: 0; 
 
    position: absolute; 
 
    top: -5000px; 
 
    width: 100%; 
 
    z-index: -1;   
 
}

<table> 
 
<tbody> 
 

 
    <tr> 
 
     <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

感謝。

Answer 1

以下は、このいずれかを試してみてくださいmouseleaveイベント

var elems = document.querySelectorAll("td"); 
 

 
var elemParents = document.querySelectorAll("tr") 
 

 
for (var td of elems) { 
 
    td.addEventListener("mouseover", function(e) { 
 
    var index = e.target.cellIndex; 
 
    for (let tr of elemParents) { 
 
     tr.querySelectorAll("td")[index] 
 
     .className = "color"; 
 
    } 
 
    }); 
 
    td.addEventListener("mouseleave", function(e) { 
 
    for (let tr of elemParents) { 
 
     for (var cell of tr.querySelectorAll("td")) { 
 
     cell.className = ""; 
 
     } 
 
    } 
 
    }) 
 
} 
 

 
function firefoxFix() { 
 

 
    if (/firefox/.test(window.navigator.userAgent.toLowerCase())) { 
 

 
    var tds = document.getElementsByTagName('td'); 
 

 
    for (var index = 0; index < tds.length; index++) { 
 
     tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>'; 
 
    }; 
 

 
    var style = '<style>' + 'td { padding: 0 !important; }' + 'td:hover::before, td:hover::after { background-color: transparent !important; }' + '</style>'; 
 
    document.head.insertAdjacentHTML('beforeEnd', style); 
 

 
    }; 
 

 
}; 
 

 
firefoxFix();

.color { 
 
    color: orange; 
 
} 
 

 
table { 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
    overflow: hidden; 
 
    z-index: 1; 
 
} 
 
td, 
 
th, 
 
.ff-fix { 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
td:hover::after, 
 
.ff-fix:hover::after { 
 
    background-color: blue; 
 
    content: '\00a0'; 
 
    height: 10000px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: -5000px; 
 
    width: 100%; 
 
    z-index: -1; 
 
}

<table> 
 
    <tbody> 
 

 
    <tr> 
 
     <td>20</td> 
 
     <td>21</td> 
 
     <td>23</td> 
 
     <td>25</td> 
 
     <td>27</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>18</td> 
 
     <td>20</td> 
 
     <td>22</td> 
 
     <td>24</td> 
 
     <td>26</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>17</td> 
 
     <td>19</td> 
 
     <td>21</td> 
 
     <td>23</td> 
 
     <td>25</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>16</td> 
 
     <td>18</td> 
 
     <td>20</td> 
 
     <td>22</td> 
 
     <td>24</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

ですべて td要素から classNameを削除

Answer 2

私が考えるよりよいアプローチは、ユーザーがfirefoxを使用しているときにhtml要素にクラスを追加することです。あなたは、例えば、そのために無名関数を使用することがあります。

(function(html) { if (/firefox/.test(window.navigator.userAgent.toLowerCase())) { html.classList.add('is-firefox'); } })(document.documentElement);

を次にあなたがそのクラスのCSSを追加することができます。

.is-firefox td { color: orange; }

ワーキングjsFiddle。 https://www.wired.com/2010/02/browser-specific_css_hacks/

Answer 3

：ここ

@-moz-document url-prefix() { td { color: orange; } }

あなたはCSSハックに関するいくつかのより多くの情報を持っている：& Firefoxの45

は、あなたがそのように、任意のjavascriptをせずにも、このCSSの修正を試みることができるクロム54でテスト

このようにすべてのセルのホバーで関数を呼び出すことができます：

function a(ele){    //On mouse over 
ele.style.color = 'orange'; 
} 

function b(ele){    // On mouse out 
ele.style.color = 'grey'; 
} 

Answer 4

こんにちは、あなたはmouseoverイベントでevent.target.cellIndexですべてtd要素にclassNameを追加することができます

$('td').hover(function() { 
 
    var t = parseInt($(this).index()) + 1; 
 
    $('td:nth-child(' + t + ')').addClass('highlighted'); 
 
}, 
 
function() { 
 
    var t = parseInt($(this).index()) + 1; 
 
    $('td:nth-child(' + t + ')').removeClass('highlighted'); 
 
});

table, td { 
 
    border: 1px solid black; 
 
} 
 

 
td { 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
.highlighted { 
 
    color:orange; 
 
    background-color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     
 
    </tr> 
 
    <tr> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
    </tr> 
 
    <tr> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
    </tr> 
 
    <tr> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
     <td>aa</td> 
 
    </tr> 
 
</table>