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

我认为更好的方法是在用户使用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。测试Chrome 54＆amp; Firefox 45。

你可以尝试这个css修复，不需要任何javascript，如：

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

这里有一些关于CSS hacks的更多信息： https://www.wired.com/2010/02/browser-specific_css_hacks/

Answer 2

你好试试下面这个

$('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>

Answer 3

您可以在className活动的td event.target处向所有.cellIndex元素添加mouseover，从所有{className移除td 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>

Answer 4

你可以像这样在每个单元格上面调用函数：

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

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

无法在表中使用CSS更改文本的颜色

4 个答案: