所選文字在640像素或更小的視口中逐漸消失

Question

我有一個頁面，如果您單擊我的代碼段中顯示的框之一，則會出現一個選中標記，並且將鼠標移開后，其中的內容就會顯示為活動狀態。 但是，當使用640像素或更小的視口查看時，選擇並選擇其他內容后，框內的文本會淡出。 它不是在普通的桌面視圖中執行此操作，那么為什么要針對特定​​的媒體查詢執行此操作？ 我根本沒有對媒體查詢中以.box-focused css進行任何更改，甚至也沒有包含它，因為我希望所有內容都一樣。

有人看到導致這種情況發生的原因是什么？

 $('.project-option-boxes').click(function() { $(this).hide().toggleClass('box_focused').fadeIn('slow'); }); 

 #project-scope-container { margin-top: 70px; margin-left: 9%; width: 75%; height: 300px; } .project-option-boxes { display: inline-block; border: 1px solid #45ba95; padding: 20px 0px; margin: 12px 20px 12px 0px; width: 30%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; transition: ease-in-out .5s; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } @media screen and (max-width:640px) { .project-option-boxes { display: block; border: 1px solid #45ba95; padding: 20px 0px; margin: 15px 0px 15px 0px; width: 85%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-scope-container"> <div id="project-scope-title">PROJECT SCOPE</div> <div class="project-option-boxes">BRANDING & IDENTITY</div> <div class="project-option-boxes">WEB DESIGN</div> <div class="project-option-boxes">RESPONSIVE/MOBILE</div> <div class="project-option-boxes">MARKETING ASSETS</div> <div class="project-option-boxes">HTML5 ANIMATION</div> <div class="project-option-boxes">SEO OPTIMIZATION</div> <div class="project-option-boxes">MONTHLY SUPPORT</div> <div class="project-option-boxes">WEB DEVELOPMENT</div> <div class="project-option-boxes">ECOMMERCE</div> </div> 

Answer 1

您沒有為媒體查詢中的聚焦樣式正確設置顏色。 請參閱下面將我添加的box_focused類添加到媒體查詢中。

 $('.project-option-boxes').click(function() { $(this).hide().toggleClass('box_focused').fadeIn('slow'); }); 

 #project-scope-container { margin-top: 70px; margin-left: 9%; width: 75%; height: 300px; } .project-option-boxes { display: inline-block; border: 1px solid #45ba95; padding: 20px 0px; margin: 12px 20px 12px 0px; width: 30%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; transition: ease-in-out .5s; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } @media screen and (max-width:640px) { .project-option-boxes { display: block; border: 1px solid #45ba95; padding: 20px 0px; margin: 15px 0px 15px 0px; width: 85%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; } .project-option-boxes:hover, .box_focused { background-color: #45ba95; color: #FFF; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-scope-container"> <div id="project-scope-title">PROJECT SCOPE</div> <div class="project-option-boxes">BRANDING & IDENTITY</div> <div class="project-option-boxes">WEB DESIGN</div> <div class="project-option-boxes">RESPONSIVE/MOBILE</div> <div class="project-option-boxes">MARKETING ASSETS</div> <div class="project-option-boxes">HTML5 ANIMATION</div> <div class="project-option-boxes">SEO OPTIMIZATION</div> <div class="project-option-boxes">MONTHLY SUPPORT</div> <div class="project-option-boxes">WEB DEVELOPMENT</div> <div class="project-option-boxes">ECOMMERCE</div> </div> 

Answer 2

您必須將相同的CSS設置復制到媒體查詢中才能應用。 這是因為范圍限制了讀取什么代碼

 $('.project-option-boxes').click(function() { $(this).hide().toggleClass('box_focused').fadeIn('slow'); }); 

 #project-scope-container { margin-top: 70px; margin-left: 9%; width: 75%; height: 300px; } .project-option-boxes { display: inline-block; border: 1px solid #45ba95; padding: 20px 0px; margin: 12px 20px 12px 0px; width: 30%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; transition: ease-in-out .5s; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } @media screen and (max-width:640px) { .project-option-boxes { display: block; border: 1px solid #45ba95; padding: 20px 0px; margin: 15px 0px 15px 0px; width: 85%; text-align: center; font-size: 1.2em; color: #45ba95; cursor: pointer; } .project-option-boxes:hover { background-color: #45ba95; color: #FFF; transition: ease-in-out .5s; } .box_focused { background-color: #45ba95; color: #FFF; background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png"); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-position: 5% 50%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-scope-container"> <div id="project-scope-title">PROJECT SCOPE</div> <div class="project-option-boxes">BRANDING & IDENTITY</div> <div class="project-option-boxes">WEB DESIGN</div> <div class="project-option-boxes">RESPONSIVE/MOBILE</div> <div class="project-option-boxes">MARKETING ASSETS</div> <div class="project-option-boxes">HTML5 ANIMATION</div> <div class="project-option-boxes">SEO OPTIMIZATION</div> <div class="project-option-boxes">MONTHLY SUPPORT</div> <div class="project-option-boxes">WEB DEVELOPMENT</div> <div class="project-option-boxes">ECOMMERCE</div> </div>