小编Pus*_*ari的帖子

鼠标悬停时的 HTML/CSS 滚动条问题

感谢任何类型的帮助来解决此问题：-

在这个最初的溢出是隐藏的，并且在鼠标悬停时可以看到表格溢出。
但在 chrome 浏览器中，滚动条上的光标闪烁/闪烁。

.one-scroll {
  max-height: 160px;
  max-width: 450px;
  background: #f7f7f7;
  position: relative;
  z-index: 100 !important;
}
.one-scroll.table-scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
}
.one-scroll.table-scrollable:hover {
  overflow-x: auto;
  overflow-y: auto;
  z-index: 100 !important;
  }

Run Code Online (Sandbox Code Playgroud)

<!Doctype html>
<html>
<head>
<style></style>
</head>
<body>
<br/>
<br/>
<section class="one-scroll table-scrollable">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Select Module</th>
        <th>Select Fields</th>
        <th>Select Operators</th>
        <th>Select Vaue</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td> …

Run Code Online (Sandbox Code Playgroud)

html css cross-browser

Pus*_*ari

2017 03-03

5
推荐指数

1
解决办法

1930
查看次数