Question

我有一个用 AngularJS 生成的表格这是我的HTML：

<table class="my_table">
    <thead>
         <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Celphone</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in contacts">
            <td>{{contact.Name}}</td>
            <td>{{contact.Address}}</td>
            <td>{{contact.Celphone}}</td>
        </tr>
    </tbody>
</table>

我希望每行在“悬停”时改变颜色，在“点击”时改变不同的颜色，所以我尝试用CSS：

<style>
.my_table tbody tr:hover {
   background-color: #7fccee; /*--- this is a blue color when hover ---*/
}
.my_table tbody tr:focus {
   background-color: #f3f3f3; /*--- this is a gray color when clicked---*/
}
</style>

悬停效果很好，但焦点无效！（奇怪的是，在浏览器控制台中，如果我选择行并且“强制元素状态：焦点”则将焦点应用于行）

我也尝试过使用带有jquery的SCRIPT：

$(document).ready(function() {
   $('.my_table tbody tr').click(function() {
      $(this).addClass('active'); //I'm adding the color gray with css to '.active'
   });
});

但这也行不通，我做错了什么？

Answer 1

:focus伪类仅适用于<input>，<button>等表单元素。您可以通过添加{添加<tr>等非表单元素{1}}，例如：

tabindex

然后正常应用CSS。

<tr tabindex="0">

.my_table tbody tr:hover {
  background-color: blue;
}

.my_table tbody tr:focus {
  background-color: red;
  outline: 0; /*remove outline*/
}

Answer 2

我会使用指令：

<div class="range">
  <input type="range" min="0" max="5" value="2" class="slider">
  <div class="sliderticks">
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</div>

如何将Focus添加到表格行？

2 个答案: