要素の垂直中央とhoverの無効化

3381 ワード

エレメント垂直方向中央揃えカバー失効

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>

django-rest-framework-jwtで発行されたtokenを無効化する

php mssqlデータベースに接続するいくつかの方法