給點擊邊界的孩子divs並保留它，直到下一個div被點擊，使用css

Question

我有一個星期日曆組成的多個div與display:flex css的屬性，其中我使用腳本來顯示日期和當天的名稱當前一天和前6天。

我需要突出顯示懸停/焦點時使用:hover僞類完成的內部div，但是當用戶懸停div的大小更改時。

這裏是fiddle和代碼片段。

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

此外，我希望發生的一樣，沒有改變大小故障，當用戶點擊了div和點擊的CSS應該保留，直到其他分區被點擊。可以在不使用jquery/javascript的情況下實現第二項任務。

謝謝！

Answer 1

所以要去除大小變化的毛刺，你可以只使用這樣的：

* { 
    box-sizing: border-box; 
} 

因爲懸停應用2px的邊界框將調整爲默認box-sizing是content-box。

查看小提琴here。

要解決這個問題： 當用戶點擊了div和點擊的CSS應該保留，直到其他分區被點擊

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; 
} 

這將使它像'點擊'一樣工作！