[英]Selected text fades away in a 640px or less viewport
I have a page that if you click one of the boxes shown in my snippet, a checkmark shows up and the content inside of shows as if it is active after you move the mouse away from it. 我有一个页面,如果您单击我的代码段中显示的框之一,则会出现一个选中标记,并且将鼠标移开后,其中的内容就会显示为活动状态。 However, when viewed with a viewport of 640px or less, the text inside of the boxes fades away after you select it and select something else.
但是,当使用640像素或更小的视口查看时,选择并选择其他内容后,框内的文本会淡出。 It is not doing this in a normal desktop view, so why is it doing it withing that specific media query?
它不是在普通的桌面视图中执行此操作,那么为什么要针对特定的媒体查询执行此操作? I did not make any changes to my
.box-focused
css in the media query at all, nor did I even include it because I wanted everything the same. 我根本没有对媒体查询中以
.box-focused
css进行任何更改,甚至也没有包含它,因为我希望所有内容都一样。
Does anyone see what it is that is causing this to happen? 有人看到导致这种情况发生的原因是什么?
$('.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>
You aren't setting the colours correctly for the focused styles in the media query. 您没有为媒体查询中的聚焦样式正确设置颜色。 See my addition of the
box_focused
class to the media query below. 请参阅下面将我添加的
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>
You have to have the same css settings copied into the media query for the same to apply. 您必须将相同的CSS设置复制到媒体查询中才能应用。 its because the scope limits what code is read
这是因为范围限制了读取什么代码
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.