元素垂直居中与hover失效

来源：互联网发布：php接口interface 编辑：程序博客网时间：2024/06/06 08:38

1. 垂直居中

1) position: absolute
2) left: 50%; margin-left: 负的元素一半宽度;
3) top: 50%; margin-top: 负的元素一半高度;
4) 该元素的直接父级, position: relative
5) 参考: http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

2. hover失效

1) 原因: 通过JS更改style, 优先级比较高
2) 解决: 在hover中的规则中, 添加 !important , 提升hover中规则的权重

3. 示例

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>垂直居中与hover失效</title>  <!--   1. 垂直居中   1) position: absolute   2) left: 50%; margin-left: 负的 元素一半宽度;   3) top:  50%; margin-top:  负的 元素一半高度;   4) 该元素的直接父级, position: relative2. hover失效   1) 原因: 通过JS更改style, 优先级比较高   2) 解决: 在hover中的规则中, 添加 !important , 提升hover中规则的权重     --><style>    * {padding: 0; margin: 0;}  .commonTable { border-collapse: collapse;}  .commonTable th { background-color: #eeeeee;}  .commonTable td, .commonTable th { font-size: 12px; border: solid 1px #c0c0c0; width: 100px; line-height: 20px; text-align: center; padding: 4px; }     /* 使用 !important 解决被覆盖的问题 */  .commonTable tr:hover {    background-color: #f3f6fa!important;  }     /* 445*175尺寸的元素 页面居中处理, 兼容所有浏览器, 随浏览器变化而变化  */  .commonTable {     position: absolute;     top: 50%;     left: 50%;    margin-left: -222px;    margin-top: -87px;  }</style><script>  window.onload = function() {    var allTrElements = document.getElementById("commonTable").getElementsByTagName("tr");    for (var i = 0; i < allTrElements.length; i++) {      allTrElements[i].onclick = function() {        for (var i = 1; i < allTrElements.length; i++) {          allTrElements[i].style.backgroundColor = "white";        };        this.style.backgroundColor = "#f3f6fa";      }    }      }</script></head><body>    <table class="commonTable" id="commonTable">    <tr class="columnNameRow">        <th>序号</th> <th>业务类型</th> <th>姓名</th> <th>身份证号码</th>    </tr>    <tr class="contentRow">        <td>1</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>    </tr>    <tr class="contentRow">        <td>2</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>    </tr>    <tr class="contentRow">        <td>3</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>    </tr>    <tr class="contentRow">        <td>4</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>    </tr>    <tr class="contentRow">        <td>5</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>    </tr>      </table>  </body></html>

0 0