所选文字在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>