Question

（在Chrome中测试）

在下面的CSS中，我试图在鼠标悬停在P标签上时切换P标签的可见性。它是隐藏的，但在悬停时会变为黄色突出显示。

p {
    visibility: hidden;
}

p:hover {
    background-color: yellow;
    text-decoration: overline;
    visibility: visible;
}

但这不起作用; P元素总是隐藏的。我确认如果删除第一个定义，那么悬停就可以了，但我需要在大多数时间隐藏它。

Answer 1

我建议改为转换opacity property。

＆＃13;

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.showing = [];
  $scope.Pets = [
    {pet: 1, place: 1, points: 1},
    {pet: 2, place: 2, points: 2},
    {pet: 3, place: 3, points: 3}
  ];
  $scope.toggle = function(i) {
    console.log("show")
    $scope.showing[i] = !$scope.showing[i];
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <table>
    <thead>
      <tr>
        <th colspan="1" class="text-center">
          Pets, Places and Points
        </th>
        <th colspan="1" class="text-center">
          Update
        </th>
        <tr>
          <thead>

            <tbody ng-repeat="p in Pets">

              <tr>

                <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
                  {{p.pet}}, {{p.place}} and {{p.points}}
                </td>

                <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
                  <button ng-click="toggle($index)">Update</button>
                  <br>
                  <div ng-show="showing[$index]">
                    <input placeholder="Pets" ng-model="Pets" />
                    <br>
                    <input placeholder="Places" ng-model="Places" />
                    <br>
                    <input placeholder="Points" ng-model="Points" />
                    <br>
                    <button ng-click="Update(Pets, Places, Points)">Enter</button>
                  </div>
                </td>
              </tr>

            </tbody>
  </table>
</div>

＆＃13;

这样做时，元素在不可见时仍会消耗相同的空间。换句话说，隐藏文本将继续与隐藏p { opacity: 0; } p:hover { background-color: yellow; text-decoration: overline; opacity: 1; }的文本类似。

无法在CSS中悬停时切换可见性属性

1 个答案: