Home > Article > Web Front-end > How to make the entire column change color after the mouse moves over a certain cell_Form special effects

How to make the entire column change color after the mouse moves over a certain cell_Form special effects

WBOYOriginal: 2016-05-16 19:20:501693browse

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

The above code can realize mouse movement When the mouse is moved to a cell, the cell changes color. Now I want to make the entire column change color after the mouse moves over a certain cell. Is it possible?

.mytable td { 
    border-bottom: 1px solid #C1DAD7; 
    background: #fff; 
    font-size:12px; 
    padding: 6px 6px 6px 0px; 
    align:center; 
    color: #4f6b72; 
}

td.alt { 
    background: #F5FAFA; 
    text-align:center; 
    color: #797268; 
}

td.baialt { 
    background: #FFFFFF; 
    text-align:center; 
    color: #000; 
}

td.spec { 
    border-top: 0; 
    background: #fff ; 
    text-align:center; 
    font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}

td.specalt { 
    border-top: 0; 
    background: #f5fafa ; 
    text-align:center; 
    font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #797268; 
} 
</style>

</div>

<p align="center">
           
            </p>
          <div align="center">When the mouse passes over, you want to change the color of every column (preferably invert the color). The effect example is as follows: <table class="mytable" cellspacing="0" id="table2"> 
        <tr align="center"> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
        </tr> 
          </table>
            <script defer>

var overcolor='#cccccc'; 
var outcolor='#f2f3f7'; 
var clkcolor='deeppink';

function init(){ 
for (var i=0;i<phx.rows.length;i++){ 
    for(var j=0;j<phx.rows[i].cells.length;j++){     
phx.rows[i].cells[j].bgColor=outcolor; 
    } 
} 
}

init();

</script>
          <script language="javascript"> 
function senfe(sid){ 
    var tds=sid.getElementsByTagName("td") 
    for(var i=0;i<tds.length;i++){ 
        if(tds[i].className=='alt'){ 
            tds[i].className="baialt"; 
        }else{ 
            tds[i].className="alt"; 
        } 
    } 
} 
</script> 
           
            </div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use js to implement the calling method of different files with multiple domain names_javascript skillsNext article：Use js to implement the calling method of different files with multiple domain names_javascript skills

See more

How to make the entire column change color after the mouse moves over a certain cell_Form special effects

Related articles