在单击时为子 div 提供边框并保留它直到单击下一个 div，使用 css

Question

我有一个由多个 div 组成的周历，其中具有 css 的 display:flex 属性，我使用脚本来显示当天和前 6 天的日期和日期名称。

我需要在悬停/聚焦时突出显示内部 div，这已使用 :hover pseudoclass 完成，但是当用户悬停时，div 的大小会发生变化。

这里是fiddle 和代码 sn-p。

.insider:hover, .insider:visited
{
 border:2px solid white;
 display:flex;
 flex-direction:column;
 background-color:#595159;
}

我也希望发生同样的事情，当用户单击 div 时，不会出现大小更改故障，并且单击时的 css 应该保留到另一个 div 被单击。不使用 jquery/javascript 是否可以完成第二个任务。

谢谢！

Answer 1

所以要消除尺寸变化的故障，你可以使用这个：

* {
  box-sizing: border-box;
}

因为在悬停时您应用了 2px 边框，所以框将调整为默认 box-sizing 是 content-box。

见小提琴here。

要解决这个问题： 当用户点击 div 时，点击的 css 应该保留到另一个 div 被点击

1. 最好用javascript/jquery。

2. 没有直接使用 CSS 的选项，但您通过修改标记采用以下技巧：

var dates = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];

var dates1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var today = new Date();
var todaysdate = today.getDate();
var todaysday = today.getDay();
//alert(today.getMonth());
for (var i = 1; i < 8; i++) {
  var data = todaysday - i + 1;
  if (data < 0) {
    data = data + 7
  }
  $("#day" + i).append("<span class='daystyle'><font face='Verdana'>" + dayNames[data] + "</font></span><br/><p class='daystyle'>" + (today.getDate() - (i - 1)) + "</p>");

}
var data1 = today.getMonth();

$(".currentmonth").append("<p><font face='Comic sans MS' size='4'>" + monthNames[data1] + "</font></p>");

* {
  box-sizing: border-box;
}
.mainContainer {
  width: 700px;
  height: 70px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #555;
  color: white;
  font-family: "My Custom Font", Verdana, Tahoma;
}
.insider,
.currentmonth {
  width: 90px;
  display: flex;
  flex-direction: column;
}
.insider:hover,
.insider:visited {
  border: 2px solid white;
  display: flex;
  flex-direction: column;
  background-color: #595159;
}
.currentmonth {
  width: 125px;
  text-align: right;
  background-color: white;
  color: black;
}
.daystyle {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}
input[type=radio] {
  display: none;
}
input[type=radio]:checked + label {
  border: 2px solid white;
  display: flex;
  flex-direction: column;
  background-color: #595159;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer">
  <div class="currentmonth" id="monthname"></div>
  <input type="radio" id="day7-in" name="dummy" />
  <label class="insider" id="day7" for="day7-in"></label>
  <input type="radio" id="day6-in" name="dummy" />
  <label class="insider" id="day6" for="day6-in"></label>
  <input type="radio" id="day5-in" name="dummy" />
  <label class="insider" id="day5" for="day5-in"></label>
  <input type="radio" id="day4-in" name="dummy" />
  <label class="insider" id="day4" for="day4-in"></label>
  <input type="radio" id="day3-in" name="dummy" />
  <label class="insider" id="day3" for="day3-in"></label>
  <input type="radio" id="day2-in" name="dummy" />
  <label class="insider" id="day2" for="day2-in"></label>
  <input type="radio" id="day1-in" name="dummy" />
  <label class="insider" id="day1" for="day1-in"></label>
</div>

在这里，您使用了一些隐藏的radio buttons 以及它们对应的labels 和这些样式：

input[type=radio] {
  display: none;
}
input[type=radio]:checked + label {
  border: 2px solid white;
  display: flex;
  flex-direction: column;
  background-color: #595159;
}

这将使它像“点击”一样工作！