元素垂直居中与hover失效



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. 示例


元素垂直居中与hover失效_第1张图片


<!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: relative

2. 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>



你可能感兴趣的:(元素垂直居中,hover失效)