クリックすると子divにボーダーを付けて、次のdivがクリックされるまでCSSを使用して保持します

Question

display:flexの複数のdivで構成された週のカレンダーがあり、現在の日付と曜日の名前を表示するスクリプトを使用しています1日前と6日前。

ホバー/フォーカス時に内部divsを強調する必要がありますが、これは:hover疑似クラスを使用して行われましたが、divの変更のサイズをユーザがホバリングしたときです。

ここにfiddleとコードスニペットがあります。

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

また、私は同じことが他のdiv要素がクリックされるまでクリック上のdivタグやCSSをユーザーがクリックすると保持しなければならないとき、グリッチをサイズ変更せずに、起こるしたいと思います。 jquery/javascriptを使用せずにこの第2のタスクを達成できますか？

ありがとうございます！

Answer 1

のでサイズ変更グリッチを削除するには、あなただけのこの使用することができます：デフォルトbox-sizingがcontent-boxあるとしてボックスは、それに合わせて調整します2ピクセルの境界線を適用するため、ホバーに

* { 
    box-sizing: border-box; 
} 

を。

フィドルhereを参照してください。この解決するため

：クリックでdivタグやCSSをユーザーがクリックすると、他のdiv要素まで保持しなければならないとき はそれではJavaScript/jQueryのを使用することをお勧めし

1. をクリックします。

2. ありCSSでnoオプションは、直接ではありませんが、あなたはマークアップを変更することで、次のトリックを採用：

   ここ

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

これは「クリック」のように動作します！