CSS：如何在悬停时为 OSX 停靠缩放提供可点击的文本？

Question

我有一个 angularJS 应用程序，我正在创建一个表格来显示所选日期的一些数据。

我在表格上方有一个 div，列出了一周中的 7 天：

<div class="DaySelectionRow">
        <div id="test3"><span class="pointer">Monday</span></div>
        <div id="test3"><span class="pointer">Tuesday</span></div>
        <div id="test3"><span class="pointer">Wednesday</span></div>
        <div id="test3"><span class="pointer">Thursday</span></div>
        <div id="test3"><span class="pointer">Friday</span></div>
        <div id="test3"><span class="pointer">Saturday</span></div>
        <div id="test3"><span class="pointer">Sunday</span></div>   
    </div>

.DaySelectionRow {
display: flex;
width: 100%;
align-items: center;
justify-content: center;

}

根据您点击的日期，表格将切换视图以显示当天的数据。

我想首先知道是否有一种方法可以使用 CSS 制作类似于 OSX 停靠图标的东西，所以当我将鼠标悬停在其中一个包含日期的 div 上时，div 会变大，如果我点击它，它保持更大一点以表明这是活跃的一天。

如果这是不可能的，或者接近它的东西，比如缩放并在活动时保持缩放，那么用 css 显示活动项目的最佳方式是什么？

我尝试使用ui-sref-active="active" 就像我对应用程序的主菜单所做的那样，但由于在这种情况下我没有更改状态，因此它不起作用并且所选日期不会保持突出显示。

我也尝试将我的日子包裹在里面而不是 ，然后使用

a:hover, div#test3 active a {
color: #f4ba51;

}

但它只在悬停时保持活动状态，而不是在点击时（我需要一些图形来显示当前选中的日期，所以除了悬停时的突出显示我需要在活动时保持突出显示，但我不知道如何定义“活动”状态，因为它不是链接也不是状态，但它将是 ng-show/ng-click，根据您单击的内容显示表格）

我也在使用引导程序，如果那里有什么可以帮助我但我不知道的话。

谢谢

Answer 1

也许你可以这样做：

.pointer {
  transition: transform 0.5s ease;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.pointer:hover, .pointer:focus {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}