元素垂直居中与hover失效

最新推荐文章于 2024-05-12 16:05:32 发布

forwardNow

最新推荐文章于 2024-05-12 16:05:32 发布

阅读量987

点赞数

分类专栏：前端文章标签：元素垂直居中 hover失效

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/40401445

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

本文介绍了一种使用CSS实现元素垂直居中的方法，并解决了hover状态被JS修改样式覆盖的问题。通过设置特定的CSS属性，使元素能够在页面中垂直居中显示；同时通过添加!important标志增强hover规则的优先级。

摘要由CSDN通过智能技术生成

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