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

Question

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

我需要在 hover/focus 上突出显示内部 divs，这是使用 :hover 伪类完成的，但是当用户悬停 div 的大小时变化。

这是 fiddle 和代码片段。

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

我也希望发生同样的事情，没有大小变化的故障，当用户点击 divs 并且点击的 css 应该保留直到另一个 div 是点击。如果不使用 jquery/javascript.

是否可以实现第二个任务？

谢谢！

Answer 1

因此，要消除 尺寸变化故障 ，您可以使用此：

* {
  box-sizing: border-box;
}

因为在悬停时您应用了 2px 的边框，所以方框会根据默认 box-sizing 调整为 content-box。

参见 fiddle here。

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

最好用javascript / jquery.
没有直接用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;
}

这将使它像 'clicks' 一样工作！

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

Give border to child divs on click and retain it till next div is clicked, using css

html

javascript

css

pseudo-class

flexbox